微信小程序實現(xiàn)文字跑馬燈
更新時間:2020年05月26日 10:16:06 作者:qq_28707553
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)文字跑馬燈,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
前言
要實現(xiàn)跑馬燈主要就是獲得判斷開始定界和結束定界, 1.9.3新增的wxml操作接口 就可以拿到節(jié)點長寬等屬性,當然你也可以直接用 文字數(shù)量 * 文字大小(注意字體的單位px,rpx)。
效果圖
短字
長字
wxml
<view class="content"> <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}px">{{announ}}</text> </view>
js
我這里用的是wepy寫的,湊合著看吧
export default class ShopIndex extends wepy.page { config = { navigationBarTitleText : '首頁', } data = { // 公告內容 announ : '超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度超長度v', announNum : 0, announy : 280, announZf : '-' } onLoad() { let self = this; var query = wepy.createSelectorQuery(); query.select('.content').boundingClientRect(ContentRes => { var query = wepy.createSelectorQuery(); query.select('.every').boundingClientRect(TextRes => { //加上一百是因為防止在歸零時出現(xiàn)閃爍的情況 let maxContentWidth = ContentRes.width + 100, maxTextWidth = TextRes.width; //初始化 self.announNum = TextRes.width self.$apply(); //定時器 setInterval(()=>{ if(self.announZf == '-') { if(self.announNum <= 0) { self.announZf = '' } else { self.announNum -= 1 } } else { if(self.announNum > (maxContentWidth)) { //歸位 self.announZf = '-' self.announNum = maxTextWidth } else { self.announNum += 1 } } self.$apply(); },5) }).exec(); }).exec(); } }
-----2018-12-24 ----
使用的時候需要注意 setInterval 的性能問題, 不用的時候或者不顯示的時候將其停止,否則會像作者一樣給自己挖坑。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件簡單示例
這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件,結合實例形式分析了JavaScript針對HTML事件、鍵盤事件及鼠標事件的簡單處理方法,需要的朋友可以參考下2019-11-11javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非?;A的javascript知識,但由于JS太靈活了,所以可能出現(xiàn)一些讓初學者崩潰的寫法。我決定由淺入深的解釋一下for循環(huán),算是給比我還新手的新手解惑吧,少走彎路2012-08-08