vue&uni-app项目实现一段文字逐个显示

朱雀 2023-01-17 11:54 336阅读 0赞

实现思路是 **将要显示的字符串用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>