这个例子分享了微信小程序实现字幕滚动的具体代码，供大家参考。具体内容如下

要求：

框中的文本可以自动从下往上循环。

解决方案：

第一种方法：

经查询，字幕滚动最初是使用微信小程序的swiper组件实现的。后来发现使用swiper组件达到的效果和转盘类似，不符合要求。

swiper class=' swiper _ container ' vertical=' true ' autoplay=' true ' circular=' true ' interval=' 2000 ' view class=' List ' view wx : for=' { { List } } wx : key=' index ' wiper-item text class=' txt-light ' { item。checktime}}/text {{item。content } }/wiper-item/view/view/wiper第二种方法：

利用微信小程序的动画实现字幕滚动。

思考：

1.当列表的底部移到容器框的顶部时，也就是说，所有的内容都从框中出来。结束字幕滚动，重新开始下一轮滚动。2.计算集装箱箱和清单的高度。一个框中的内容显示时间为1500(暂定)，显示时间可以用列表的高度除以容器框的高度来判断(整数加1(1是显示最后一个空白框))。

实现：

页面结构

view class=' container ' view class=' list ' animation=' { { animation data } } ' view text class=' txt-light ' 09336008/text很多人基本上一辈子都在和别人竞争，比如别人对自己的期望，比如把别人看得太重，把自己看得太轻。其实对于一个人来说，最重要的问题是如何与自己相处，比如去空无一人的大楼时如何照顾自己的孤独，夜深人静时如何与自己的灵魂沟通。你可以和自己和谐相处，也可以和别人和平相处。/view view text class=' txt-light ' 19:08/text和平是对人的一种态度，也是做人的一种美德。和平不仅是一种修养，更是一种工作方法。爱好和平的人从不被忙碌所困扰。他们有空的时候很紧，忙的时候很悠闲。看人淡，教人不要高。宽严相济，分寸得当。身心舒畅，享受生活乐趣。平静的生活是和谐的生活，是健康的生活。/view /view/viewwxss。容器{背景色： # CCC；height:150rpxmargin : 20 rpx 20 rpx 20 rpx 20 rpx；飞越： auto；}.txt-light { color : # acad be；}js

页面({ /** *页面的初始数据*/data: { }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ },/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){//这个。util()；这个。GetHeight()；}，util:函数{控制台。日志(obj)；控制台。log(-obj。列表)；var continueTime=(parsent(obj。列表/对象。集装箱)1)* 1500；var setIntervalTime=50 continueTime；var动画=wx。createanimation({持续时间：200//动画时长定时功能： '线性',//线性delay: 0 //0则不延迟});this.animation=动画；动画。翻译。集装箱).步骤({ duration: 50，TimingFunctions : ' step-start ' }).translateY(-obj.list).步骤({持续时间： Continuetime })；这个。setdata({ animationData:)动画。export()})setInterval(()={ animation。翻译。集装箱).步骤({ duration: 50，TimingFunctions : ' step-start ' }).translateY(-obj.list).步骤({持续时间： Continuetime })；这个。setdata({ animationData:)动画。export()})}，setIntervalTime)//setInterval(()={//动画。翻译(50).步骤({ duration: 50，TimingFunctions : ' step-start ' }).translateY(-250).步骤({持续时间： 5000 })；//这个。setdata({//animationData:动画。export()//})/}，6000) }，getHeight(){ var obj=new Object()；//创建节点选择器var查询=wx。createselectorquery()；query.select(' .容器')。boundingClientRect()。查询。选择(' .列表')。boundingClientRect()。查询。exec((RES)={ obj。容器=RES[0].身高；//框的高度obj.list=res[1]。身高；//列表的高度//返回这是。util(obj)；}) }})20180712更新：

1.框设置为禁止滑动，即。集装箱{ overflow:隐藏；}防止手动滑动动画，从而影响设置时间间隔的执行。

2.设置设置时间间隔的执行时间动画执行时间，防止设置时间间隔执行卡顿。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。