E_WeChat/components/Yl_FunTabs/index.js

Component({
    options: {
        multipleSlots: true,
        addGlobalClass: true
    },
    properties: {
        list: {
            type: Array
        },
        active: {
            type: Number,
            value: 0
        },
        onChenge: {
            type: Function
        }
    },
    data: {
        scrollLeft: 0,
        startPoint: 0, //记录滑动的初始位置
        slipFlag: false, //定义 滑动事件 节流阀, 防止一次滑动触发多次滑动事件
    },
    methods: {
        tabsChenge(e) {
            const {
                index
            } = e.currentTarget.dataset;
            if (this.data.active == index) return;
            this.setData({
                active: index
            });
            this.setActive();
        },
        setActive() {
            const that = this,
                active = this.data.active,
                query = wx.createSelectorQuery().in(this)
            query.select('#active' + active).boundingClientRect(function (res) {
                that.setData({
                    scrollLeft: res.right - res.width
                })
            }).exec();
            this.triggerEvent("onChenge", active)
        },
        myTouchStart(e) {
            return;
            this.setData({
                slipFlag: true,
                startPoint: e.touches[0]
            })
        },
        myTouchMove(e) {
            return;
            let active = this.data.active;
            if (((this.data.startPoint.clientX - e.touches[e.touches.length - 1].clientX) > 80) && this.data.slipFlag) {
                if (active != this.data.list.length - 1) active++;
                this.setData({
                    slipFlag: false,
                    active
                })
            } else if (((this.data.startPoint.clientX - e.touches[e.touches.length - 1].clientX) < -80) && this.data.slipFlag) {
                if (active != 0) active--;
                this.setData({
                    slipFlag: false,
                    active
                })
            }
            this.setActive();
        },
    }
})