您好,登錄后才能下訂單哦!
小編這次要給大家分享的是微信小程序如何實現簡單文字跑馬燈,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
本文實例為大家分享了微信小程序實現文字跑馬燈 的具體代碼,供大家參考,具體內容如下
效果如圖
WXML
<scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" > <text>{{text}}</text> <text ></text> <text >{{text}}</text> </view> </view> </view> </scroll-view>
WXSS
.container {display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;} .scrolltxt{padding:0 20rpx;background:#f8f8f8;} .marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} .marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}
JS
data: { //滾動字幕 text: "溫馨提示:為了保證其他購買者的利益,每個 賬號針對同一商品只允許退款一次,請您謹慎操作。", marqueePace: 1,//滾動速度 marqueeDistance: 0,//初始滾動距離 marquee_margin: 30,//間距 size: 14,//字號 time: '',// 定時器 }, onHide: function () { //清空滾動字幕定時器,避免鎖屏或頁面隱藏后移動速度越來越快 clearInterval(this.data.time); }, onShow: function (e) { var that = this; var length = that.data.text.length * that.data.size;//文字長度 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度 //console.log(length,windowWidth); that.setData({ length: length, windowWidth: windowWidth }); that.scrolltxt();// 第一個字消失后立即從右邊出現 }, /** * 滾動字幕 */ scrolltxt: function () { var that = this; var length = that.data.length;//滾動文字的寬度 var windowWidth = that.data.windowWidth;//屏幕寬度 var time = this.data.time if (length > windowWidth) { time = setInterval(function () { var maxscrollwidth = length + that.data.marquee_margin;//滾動的最大寬度,文字寬度+間距,如果需要一行文字滾完后再顯示第二行可以修改marquee_margin值等于windowWidth即可 var crentleft = that.data.marqueeDistance; if (crentleft < maxscrollwidth) {//判斷是否滾動到最大寬度 that.setData({ marqueeDistance: crentleft + that.data.marqueePace }) } else { that.setData({ marqueeDistance: 0 // 直接重新滾動 }); clearInterval(time); that.scrolltxt(); } }, 20); } else { that.setData({ marquee_margin: "1000" });//只顯示一條不滾動右邊間距加大,防止重復顯示 } that.setData({ time:time }) },
看完這篇關于微信小程序如何實現簡單文字跑馬燈的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。