时间:2022-12-06 01:08
微信小程序开发页面添加文字自动滚动的案例:
通过控制滑动条来完成文字滚动,通过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);
})
}
})