微信小程序?qū)崿F(xiàn)簡單文字跑馬燈
本文實(shí)例為大家分享了微信小程序?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: { //滾動(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;//文字長度 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 }) },
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript對(duì)象字面量和構(gòu)造函數(shù)原理與用法詳解
這篇文章主要介紹了JavaScript對(duì)象字面量和構(gòu)造函數(shù),結(jié)合實(shí)例形式分析了JavaScript對(duì)象字面量和構(gòu)造函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫,使用了requestAnimationFrame,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感為興趣的小伙伴們可以參考一下2022-01-01JavaScript中子函數(shù)訪問外部變量的3種解決方法
任何在函數(shù)中定義的變量,都可認(rèn)為是私有變量,因?yà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理想生活列車自動(dòng)領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車自動(dòng)領(lǐng)喵幣腳本,需要先安裝 auto.js腳本,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06利用PHP實(shí)現(xiàn)遞歸刪除鏈表元素的方法示例
這篇文章主要給大家介紹了關(guān)于如何利用PHP實(shí)現(xiàn)遞歸刪除鏈表元素的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10Javascript 制作圖形驗(yàn)證碼實(shí)例詳解
這篇文章主要介紹了Javascript 制作圖形驗(yàn)證碼實(shí)例詳解的相關(guān)資料,附有實(shí)例代碼及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-12-12關(guān)于Javascript模塊化和命名空間管理的問題說明
最近閑下來的時(shí)候,稍微想了想這個(gè)問題。關(guān)于Javascript模塊化和命名空間管理2010-12-12