E-MD/components/Yl_switch/index.js

Component({
    properties: {
        list: {
            type: Array,
            value: ['最新', '最热']
        },
        change: {
            type: Function
        },
        sort: {
            type: Array
        },
        reversed: {
            type: Number,
            value: 0
        }
    },
    lifetimes: {
        attached() {},
        ready: function () {
            const that = this;
            let query = wx.createSelectorQuery().in(this)
            query.select('.switch-box').boundingClientRect();
            query.exec(function (res) {
                that.setData({
                    baseLeft: res[0].left
                })
                that.chengeSelect()
            })
        }
    },
    data: {
        checkedItem: 0, //选中项
        animationData: {}, //横线平移动画
        baseLeft: 0,
    },
    methods: {
        changeSwitch(e) {
            let checkedItem = this.data.checkedItem == 0 ? 1 : 0
            this.setData({
                checkedItem
            })
            let name = this.data.list[this.data.checkedItem],
                sort = this.data.sort;
            for (let i = 0; i < sort.length; i++) {
                sort[i].sorted = sort[i].sortname == name ? 1 : 0;
                sort[i].reversed = this.data.reversed
            }
            this.triggerEvent('change', checkedItem)
            this.chengeSelect()
        },
        chengeSelect() {
            let animation = wx.createAnimation({
                duration: 1000,
                timingFunction: 'ease',
            })
            let that = this;
            let query = wx.createSelectorQuery().in(this)
            query.select('.active').boundingClientRect();
            query.exec(function (res) {
                let baseLeft = that.data.baseLeft == res[0].width ? 0 : res[0].width;
                animation.translate(baseLeft).step({
                    duration: 300
                })
                that.setData({
                    animationData: animation.export(),
                    baseLeft
                })
            })
        }
    }
})