微信小程序实现文字从右向左无限滚动

本文实例为大家分享了微信小程序实现文字无限滚动的具体代码，供大家参考，具体内容如下

布局页面页面结构

scroll-view class=' container ' view class=' scroll txt ' view class=' marquee _ box ' view class=' marquee _ text ' style=' transform : translateX(-{ { marqueeDistance } } px)' text { { text } }/text text style=' marquee-right : { { marquee _ margin } } px；'/text text style=' margin-right : { { marquee _ margin } } px；'{ { text } }/text/view/view/view/scroll-view样式页面页面样式表。集装箱{身高： 100%；显示： flex flex-方向：柱；正义-内容：空格；盒子尺寸：边框盒子；}.scrolltxt { padding:0 20rpx背景# f8f8f8}。marquee _ box {位置：相对；颜色： # 333height:90rpx显示：块；飞越：隐藏；} .marquee _ text { white-space : nowrap；位置：绝对；top :0 font-size :14 px；高度：90rpx线高：90 rpx}小程序射流研究…页面

页面({ /** *页面的初始数据* Linyufan.com */数据： {文本： '这是一条测试公告，看看效果怎么样，2019年3月23日，marqueePace: 1，//滚动速度marqueeDistance: 0，//初始滚动距离marquee_margin: 30，size:14，interval: 20 /时间间隔}, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ }，onShow:函数(){ var即=thisvar length=that。数据。文字。长度*那个。数据。大小；//文字长度var windowWidth=wx。getsysteminfosync().windowWidth//屏幕宽度//console.log(长度，窗口宽度)；那个。setdata({ length : length，window width : window width })；那个。scrolxt()；//第一个字消失后立即从右边出现}，scrolltxt:函数(){ var=this可变长度=那个。数据。长度；//滚动文字的宽度变化窗宽=那个。数据。窗口宽度；//屏幕宽度if(length window width){ var interval=setInterval(function(){ var maxscrollwidth=length that。数据。marquee _ margin//滚动的最大宽度，文字宽度间距，如果需要一行文字滚完后再显示第二行可以修改选取框_边距值等于窗口宽度即可var克伦特勒夫特=那个。数据。Marqueedistanceif (crentleft maxscrollwidth) {//判断是否滚动到最大宽度那个。setdata({ marqueedistance : crent tleft }即。数据。marquepace })} else {//console。日志('替换');那个。setdata({ Marqueedistance : 0//直接重新滚动});clearInterval(区间);那个。scrolxt()；} }，那个。数据。间隔)；}否则{那。setdata({ marquee _ margin : ' 1000 ' })；//只显示一条不滚动右边间距加大，防止重复显示} }})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。