技术

QQ小程序滚动公告插件

之前第一次在小程序里写公告的时候，用的是动态修改left值，卡的一逼。再之后是用css动画，移动距离不好把握，用变量控制移动实在是有点蠢

前几天又遇到了公告的需求，于是试着使用了小程序内部的Animation对象，感觉还比较流畅。

为了便于复用及维护，以插件的形式编写，给外部一个展示公告的方法

1
2
3
4
5
self.selectComponent(`#theggitem`).setGGtxt(
    drawinfo.unickname,
    drawinfo.itemname,
    self.loadDrawInfo
);

插件内部专心处理公告的展示，先在ready事件里面初始化各种对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Component({
    ...
    ...
    lifetimes: {
        ready(){
            let
            self = this,
            theWidth = app.globalData.sysInfo.windowWidth || 375,
            theScale = parseFloat((theWidth / 750).toFixed(2)),
            maskWidth = theScale * 261;
            self.setData({
                theScale: theScale,
                maskWidth: maskWidth
            });
            self.animateObj = qq.createAnimation({
                duration: animateTime
            });
        }
    }
    ...
    ...
});

其中展示区域的宽度是固定的，还要根据实际分辨率还进行缩放。有了展示宽度之后，公告文字默认位置就用left等于展示宽度，然后再让文字移动到left等于负的文字宽度的位置，就是刚好走完全程了。

其中，文字的样式要是绝对定位，同时要有white-space: nowrap;这个属性。这样使用小程序提供的方法读取出来的宽度才是准确的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Component({
    ...
    ...
    methods: {
        setGGtxt(uname, itemname, cb){
            let
            self = this,
            animateObj = self.animateObj;
            self.setData({
                showMask: true,
                uname: uname,
                itemname: itemname,
                animatedata: null
            });
            self.createSelectorQuery().select("#ggtxt").boundingClientRect((res)=>{
                animateObj.left(-1 * res.width).step();
                let animatedata = animateObj.export();
                self.setData({
                    animatedata: animatedata
                });
                setTimeout(()=>{
                    self.setData({
                        showMask: false
                    });
                    !!cb ? setTimeout(cb, 5000) : !1;
                }, animateTime);
            }).exec();
        }
    }
    ...
    ...
}