微信小程序开发页面怎样添加文字自动滚动

微信小程序开发页面怎样添加文字自动转动

微信小程序开发页面添加文字自动转动的案例：

通过控制滑动条来完成文字转动，通过setinterval完成文字循环转动。

在对应的wxml文件中添加以下代码：

<scroll-viewclass="container"scroll-y="true"bindscroll="scroll"scroll-top="{{scrollTop}}">
<viewclass='list'>
<viewclass='blank'></view>
<view>
<textclass="txt-light">09:08</text>很多人的一生，基本都是自己跟他人较劲，比如他人对自己的期待，比如把他人看得太重把自己看得太轻。其实一个人最应当斟酌的问题是，自己如何与自己相处，比如人去楼空的时候如何照顾好自己的孤独，比如夜深人静的时候如何跟心灵沟通。自己跟自己能和谐共处，自己跟他人就可以相安无事。
</view>
<view>
<textclass="txt-light">19:08</text>平和是待人处事的一种态度，也是做人酌一种美德。平和既是一种修养，又是一种工作方法。平和的人，从不被繁忙所缭绕，闲时吃紧，忙里悠闲。待人不严，教人勿高。宽严得宜，分寸得体。身心自在，能享受生活之乐趣。平和的人生，是和谐的人生，健康的人生。
</view>
<viewclass='blank'></view>
</view>
</scroll-view>

在对应的wxss文件中添加以下代码：

.container{
background-color:#FAEBD7;
height:150rpx;
}
.txt-light{
color:#acadbe;
}
.blank{
height:150rpx;
}

在对应的js文件中添加以下代码：

Page({
/**
*页面的初始数据
*/
data:{
scrollTop:0
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
},
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){
//获得scroll-view的节点信息
//创建节点选择器
varquery=wx.createSelectorQuery();
query.select('.container').boundingClientRect()
query.select('.list').boundingClientRect()
query.exec((res)=>{
varcontainerHeight=res[0].height;
varlistHeight=res[1].height;
//转动条的高度增加
varinterval=setInterval(()=>{
if(this.data.scrollTop<listHeight-containerHeight){
this.setData({
scrollTop:this.data.scrollTop+10
})
}else{
//clearInterval(interval);
this.setData({
scrollTop:0
})
}
},1000)
})
},
scroll:function(){
//获得scroll-view的节点信息
//创建节点选择器
varquery=wx.createSelectorQuery();
query.select('.list').boundingClientRect()
query.exec((res)=>{
this.setData({
scrollTop:-(res[0].top)
})
//console.log(res);
})
}
})

本文来源：https://www.yuntue.com/post/80117.html | 云服务器网，转载请注明出处！