近期有一個(gè)顯示文字水平滾動(dòng)的需求，思考了半天寫了幾行小程序代碼，一言不合就上代碼：

wxml

<view class="rollCon">

? ? <view class="box">

????????<view class="text"? style="left:{{offsetLeft}}px"> {{text}} </view>

????</view>

</view>

wxss

.rollCon{position: fixed;bottom: 0;left: 0;width: 100%;height: 60rpx;z-index: 100;background: #FDE8C7;font-size: 20rpx;line-height: 60rpx;}

.box {width: 100%;position: relative;}

.text {white-space: nowrap;position: absolute;top: 0;}//注意一定要用nowrap。。。

js

data={text:'共0張 價(jià)稅合計(jì)：12121 金額：2323233 稅額：232423',

pace: 1,//滾動(dòng)速度

start: 0,//初始滾動(dòng)距離

interval:20,//時(shí)間間隔

size:14,

length:0,

windowWidth:0,}

//文字走馬燈

run(){

let that = this;

let interval = setInterval(function () {if (-that.start < that.length) {

that.start = that.start - that.pace;

that.$apply();

} else {

clearInterval(interval);

that.start = that.windowWidth;

that.run();

that.$apply();}

}, that.interval);}

onshow(){

//文字滾動(dòng)

let length = (this.text.length-20) * this.size;//文字長(zhǎng)度

let windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度

this.length = length;this.windowWidth = windowWidth;

this.$apply()

this.run();}

定時(shí)器每次觸發(fā)時(shí)，調(diào)用this.$apply()來(lái)更新data數(shù)據(jù) ，要不每次只執(zhí)行一次，數(shù)據(jù) 得不到改變?。?！