前言

要實現跑馬燈主要就是獲得判斷開始定界和結束定界, 1.9.3新增的wxml操作接口 就可以拿到節點長寬等屬性，當然你也可以直接用 文字數量 * 文字大小(注意字體的單位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 => {    //加上一百是因為防止在歸零時出現閃爍的情況    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 的性能問題, 不用的時候或者不顯示的時候將其停止，否則會像作者一樣給自己挖坑。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。