原理：

利用css3的translate,動態修改這個屬性值。

.ttt{color:#fff;white-space: nowrap;font-size: 14px;height: 80rpx;line-height: 80rpx; }

?

<scroll-view><view class="ttt" style="transform: translateX(-{{distance}}px)"><text style="margin-right:{{space}}px;"></text><text id="mjltest">{{text}}</text><text style="margin-right:{{space}}px;"></text><text>{{text}}</text></view> </scroll-view>

　　

Page({data: {text: "滾動字幕~~~~",step: 1, //滾動速度distance: 0, //初始滾動距離space: 30,interval: 20 // 時間間隔 },onShow: function() {var that = this;var query = wx.createSelectorQuery();//選擇idquery.select('#mjltest').boundingClientRect()query.exec(function(res) {var length = res[0].width;var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕寬度 that.setData({length: length,windowWidth: windowWidth,space:windowWidth});that.scrollling(); // 第一個字消失后立即從右邊出現 });},scrollling: function() {var that = this;var length = that.data.length; //滾動文字的寬度var windowWidth = that.data.windowWidth; //屏幕寬度var interval = setInterval(function() {var maxscrollwidth = length + that.data.space;var left = that.data.distance;if (left < maxscrollwidth) { //判斷是否滾動到最大寬度 that.setData({distance: left + that.data.step})} else {that.setData({distance: 0 // 直接重新滾動 });clearInterval(interval);that.scrollling();}}, that.data.interval);} })

?

轉載于:https://www.cnblogs.com/panyujun/p/10287229.html

總結

以上是生活随笔為你收集整理的小程序中实现滚动字幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。