微信小程序-實現文字跑馬燈-wepy

百度蠻多例子的,可是代碼太長懶得看了

前言

要實現跑馬燈主要就是得到判斷開始定界和結束定界, 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 的性能問題, 不用的時候或者不顯示的時候將其中止，不然會像做者同樣給本身挖坑。

來源：https://blog.csdn.net/qq_28707553/article/details/85028122