微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈

小編這次要給大家分享的是微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)專注于道外企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(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

<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;}

 data: {
 //滾動(dòng)字幕
 text: "溫馨提示：為了保證其他購(gòu)買者的利益，每個(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í)器，避免鎖屏或頁(yè)面隱藏后移動(dòng)速度越來(lái)越快
 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)單文字跑馬燈的文章，如果覺(jué)得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

本文標(biāo)題：微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈
網(wǎng)站鏈接：http://aaarwkj.com/article46/pcodhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、小程序開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

微信小程序如何實(shí)現(xiàn)簡(jiǎn)單文字跑馬燈