微信小程序?qū)崿F(xiàn)簡單文字跑馬燈
本文實例為大家分享了微信小程序?qū)崿F(xiàn)文字跑馬燈 的具體代碼,供大家參考,具體內(nèi)容如下
效果如圖
WXML
<scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)"> <text>{{text}}</text> <text style="margin-right:{{marquee_margin}}px;"></text> <text style="margin-right:{{marquee_margin}}px;">{{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: "溫馨提示:為了保證其他購買者的利益,每個 賬號針對同一商品只允許退款一次,請您謹(jǐn)慎操作。", 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();// 第一個字消失后立即從右邊出現(xiàn) }, /** * 滾動字幕 */ 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" });//只顯示一條不滾動右邊間距加大,防止重復(fù)顯示 } that.setData({ time:time }) },
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript對象字面量和構(gòu)造函數(shù)原理與用法詳解
這篇文章主要介紹了JavaScript對象字面量和構(gòu)造函數(shù),結(jié)合實例形式分析了JavaScript對象字面量和構(gòu)造函數(shù)相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04JavaScript中子函數(shù)訪問外部變量的3種解決方法
任何在函數(shù)中定義的變量,都可認(rèn)為是私有變量,因為不能在函數(shù)外部訪問這些變量,這篇文章主要給大家介紹了關(guān)于JavaScript中子函數(shù)訪問外部變量的3種解決方法,需要的朋友可以參考下2021-06-06Java中int與integer的區(qū)別(基本數(shù)據(jù)類型與引用數(shù)據(jù)類型)
這篇文章主要介紹了int與integer的區(qū)別(基本數(shù)據(jù)類型與引用數(shù)據(jù)類型),簡單的說 int 是基本數(shù)據(jù)類型,integer 是引用數(shù)據(jù)類型,具體區(qū)別詳解大家參考下本文2017-02-022020淘寶618理想生活列車自動領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車自動領(lǐng)喵幣腳本,需要先安裝 auto.js腳本,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06關(guān)于Javascript模塊化和命名空間管理的問題說明
最近閑下來的時候,稍微想了想這個問題。關(guān)于Javascript模塊化和命名空間管理2010-12-12