小編這次要給大家分享的是微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)專注于道外企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),成都做商城網(wǎng)站。道外網(wǎng)站建設(shè)公司,為道外等地區(qū)提供建站服務(wù)。全流程按需策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)文字跑馬燈 的具體代碼，供大家參考，具體內(nèi)容如下
效果如圖
WXML
{{text}} {{text}}
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: {
//滾動(dòng)字幕
text: "溫馨提示：為了保證其他購買者的利益，每個(gè) 賬號(hào)針對(duì)同一商品只允許退款一次，請(qǐng)您謹(jǐn)慎操作。",
marqueePace: 1,//滾動(dòng)速度
marqueeDistance: 0,//初始滾動(dòng)距離
marquee_margin: 30,//間距
size: 14,//字號(hào)
time: '',// 定時(shí)器
},
onHide: function () {
//清空滾動(dòng)字幕定時(shí)器，避免鎖屏或頁面隱藏后移動(dòng)速度越來越快
clearInterval(this.data.time);
},
onShow: function (e) {
var that = this;
var length = that.data.text.length * that.data.size;//文字長(zhǎng)度
var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度
//console.log(length,windowWidth);
that.setData({
length: length,
windowWidth: windowWidth
});
that.scrolltxt();// 第一個(gè)字消失后立即從右邊出現(xiàn)
},
/**
* 滾動(dòng)字幕
*/
scrolltxt: function () {
var that = this;
var length = that.data.length;//滾動(dòng)文字的寬度
var windowWidth = that.data.windowWidth;//屏幕寬度
var time = this.data.time
if (length > windowWidth) {
time = setInterval(function () {
var maxscrollwidth = length + that.data.marquee_margin;//滾動(dòng)的最大寬度，文字寬度+間距，如果需要一行文字滾完后再顯示第二行可以修改marquee_margin值等于windowWidth即可
var crentleft = that.data.marqueeDistance;
if (crentleft < maxscrollwidth) {//判斷是否滾動(dòng)到最大寬度
that.setData({
marqueeDistance: crentleft + that.data.marqueePace
})
}
else {
that.setData({
marqueeDistance: 0 // 直接重新滾動(dòng)
});
clearInterval(time);
that.scrolltxt();
}
}, 20);
}
else {
that.setData({ marquee_margin: "1000" });//只顯示一條不滾動(dòng)右邊間距加大，防止重復(fù)顯示
}
that.setData({
time:time
})
},看完這篇關(guān)于微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。
