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

时间: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);

})

}

})

标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公