uni-halo/pagesA/love/journey.vue

<template>
	<view class="app-page">
		<view class="page-title">我们的故事</view>
		<view class="html-typed" v-html="html">内容渲染</view>

		<scroll-btn bottom="160rpx" :scrollTop.sync="scrollTop"></scroll-btn>
	</view>
</template>

<script>
import LoveConfig from '@/config/love.config.js';
import ScrollBtn from '@/components/scroll-btn/scroll-btn.vue';
export default {
	components: { ScrollBtn },
	data() {
		return {
			scrollTop: 0,
			html: '',
			timer: null
		};
	},
	created() {
		this.fnInit();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onBackPress() {
		clearTimeout(this.timer);
	},
	methods: {
		fnInit() {
			clearTimeout(this.timer);
			const _html = LoveConfig.journey;
			let _index = 0;
			const _typing = () => {
				this.timer = setTimeout(() => {
					if (_index >= _html.length) {
						clearTimeout(this.timer);
					} else {
						this.html += _html.substring(_index, _index + 1);
						_index += 1;
						_typing();
					}
				}, 100);
			};
			_typing();
		}
	}
};
</script>

<style scoped lang="scss">
.app-page {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 36rpx;
	/* #ifdef APP-PLUS */
	padding-top: 100rpx;
	/* #endif */
	/* #ifdef H5 */
	padding-top: 80rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	padding-top: 120rpx;
	/* #endif */
	background: linear-gradient(
		-45deg,
		rgba(247, 149, 51, 0.1),
		rgba(243, 112, 85, 0.1) 15%,
		rgba(239, 78, 123, 0.1) 30%,
		rgba(161, 102, 171, 0.1) 44%,
		rgba(80, 115, 184, 0.1) 58%,
		rgba(16, 152, 173, 0.1) 72%,
		rgba(7, 179, 155, 0.1) 86%,
		rgba(109, 186, 130, 0.1)
	);
	color: rgba(26, 26, 26, 1);
}
.page-title {
	font-size: 42rpx;
	font-weight: bold;
	text-align: center;
	text-shadow: 0rpx 4rpx 24rpx #bfe9ef;
}
.html-typed {
	margin-top: 52rpx;
	line-height: 1.8;
	font-size: 30rpx;
}
</style>