building_tx_mini_wx_rebuild/components/dotLine/index.js

// components/dotLine/index.js
Component({
  /**
   * 组件的属性列表
   */
  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,
      });
    }
  }
})