实现思路是 将要显示的字符串用substr() 方法进行分割,使用计时器逐个增加要分割的长度
主要代码:
onLoad(options) {
this.data=JSON.parse(options.data)
this.wen = ''
//声明一个变量,用来监听要分割的长度
var wenlen = 0
this.timer=setInterval (()=>{
//取到data.content的第wenlen位
this.wen = this.data.content.substr(0,wenlen);
//wenlen大于data.content的长度,停止计时器
if(wenlen<this.data.content.length){
wenlen++
}else{
clearInterval(this.timer);
// return
}
console.log(this.wen)
},100);
},
//监听页面返回,退出页面时清除计时器
onBackPress() {
clearInterval(this.timer);
},
这里是uni-app项目
整个页面的代码:
<template>
<view>
<view class="detail">
<text class="tit">{{data.title}}</text>
<view class="writer">{{data.writer}} · <text>{{data.dynasty}}</text></view>
<text id="article" selectionchange="true">{{wen}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:{},
timer:null,
wen:''
}
},
onLoad(options) {
this.data=JSON.parse(options.data)
this.wen = ''
console.log(this.data)
uni.setNavigationBarTitle({
title:this.data.title
})
//声明一个变量,用来监听要分割的长度
var wenlen = 0
this.timer=setInterval (()=>{
//取到data.content的第wenlen位
this.wen = this.data.content.substr(0,wenlen);
//wenlen大于data.content的长度,停止计时器
if(wenlen<this.data.content.length){
wenlen++
}else{
clearInterval(this.timer);
// return
}
console.log(this.wen)
},100);
},
//监听页面返回,退出页面时清除计时器
onBackPress() {
clearInterval(this.timer);
},
methods: {
}
}
</script>
<style>
.tit{
text-align: center;
color: #333333;
font-size: 25px;
width: 100%;
display: block;
}
.writer{
text-align: right;
padding-right: 50px;
}
#article{
display: block;
color: red;
font-size: 16px;
/* text-indent: 32px; */
line-height: 30px;
width: 90%;
margin: 10px auto;
}
</style>