微信小程序-实现文字跑马灯-wepy

同步自己文章，来自作者csdn平台 地址

百度蛮多例子的,但是代码太长懒得看了

前言

要实现跑马灯主要就是获得判断开始定界和结束定界, <font color=red>1.9.3新增的wxml操作接口</font> 就可以拿到节点长宽等属性，当然你也可以直接用 <font color=red>文字数量 * 文字大小(注意字体的单位px,rpx)</font>。

效果图

短字

长字

## 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 ----

使用的时候需要注意 <font color=red>setInterval</font> 的性能问题, 不用的时候或者不显示的时候将其停止，否则会像作者一样给自己挖坑。