txly-zfb-mini/components/dotLine/index.js

// components/dotLine/index.js
Component({
  options: {
    observers: true
  },
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            value: [
                {
                    name: "步骤1"
                },
                {
                    name: "步骤2"
                },
                {
                    name: "步骤3"
                }
            ]
        },
        currentIndex: {
            type: Number,
            value: 0
        },
        swiperDx: {
            type: Number,
            value: 0
        },
        width: {
            type: Number,
            value: 140
        },
        language: {
            type: String
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        tabList: []
    },
    /**
     * 组件的方法列表
     */
    methods: {},
    observers: {
        swiperDx: function(swiperDx) {
            const { currentIndex } = this.data;
            this.data.list.forEach((item, index) => {
                item.isPass = index <= currentIndex;
                if (swiperDx > 0 && swiperDx < 375) {
                    if (index < currentIndex + 1) {
                        item.width = this.data.width;
                    } else if (index == currentIndex + 1) {
                        item.width = (swiperDx / 375) * this.data.width;
                    } else if (index > currentIndex + 1) {
                        item.width = 0;
                    }
                } else if (swiperDx < 0 && swiperDx > -375) {
                    if (index < currentIndex) {
                        item.width = this.data.width;
                    } else if (index == currentIndex) {
                        item.width = (1 + swiperDx / 375) * this.data.width;
                    } else if (index > currentIndex) {
                        item.width = 0;
                    }
                }
            });
            this.setData({
                tabList: this.data.list
            });
        },
        currentIndex: function(currentIndex) {
            const { swiperDx } = this.data;
            this.data.list.forEach((item, index) => {
                item.isPass = index <= currentIndex;
                if (swiperDx == 0 || swiperDx >= 375 || swiperDx <= -375) {
                    if (index <= currentIndex) {
                        item.width = this.data.width;
                    } else if (index > currentIndex) {
                        item.width = 0;
                    }
                }
            });
            this.setData({
                tabList: this.data.list
            });
        }
    }
});