E_WeChat/pages/tabbar/message/modules/tabs.js

// pages/tabbar/message/modules/tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            value: [{
                label: '系统消息',
                nubmer: "9"
            }, {
                label: '应用消息',
                nubmer: "15"
            }]
        },
        onChange: {
            type: Function
        }
    },

    lifetimes: {
        ready() {
            this.setBorBotLeft()
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        animationData: {}, //横线平移动画
        acIndex: 0,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /* 改变选中 */
        changeTab(e) {
            if (this.data.acIndex == e.currentTarget.dataset.index) return;
            this.setData({
                acIndex: e.currentTarget.dataset.index
            })
            this.triggerEvent("onChange", e.currentTarget.dataset.item)
            this.setBorBotLeft()
        },
        //更改横线位置
        setBorBotLeft() {
            let animation = wx.createAnimation({
                duration: 1000,
                timingFunction: 'ease',
            })
            let that = this;
            let query = wx.createSelectorQuery().in(this)
            query.select('.acTitle').boundingClientRect();
            query.exec(function (res) {
                animation.translate(res[0].left).step({
                    duration: 300
                })
                that.setData({
                    animationData: animation.export()
                })
            })
        },
    }
})