yimei_spa/pages/skinRecord/components/explanation/explanation.js

// pages/skinRecord/components/explanation/explanation.js
const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  options: {
    addGlobalClass: true
  },

  properties: {
    explanation: {
      type: Array,
      value: [],
    },
    index: {
      type: String,
      value: '',
      observer(newVal) {
        if(newVal == '1') {
          this.data.heightArr = []
          let query = wx.createSelectorQuery().in(this);;
          query.selectAll('.item-box').boundingClientRect((rect)=> {
            let sum = 0;
            rect.forEach((item,index) => {
              if(index == 0) {
                sum = item.height;
                this.data.heightArr.push(sum);
              } else {
                sum+=item.height
                this.data.heightArr.push(sum);
              }
              // this.calculateHeight(item.height);
            })
            console.log(rect)
          }).exec();
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    heightArr: [],
    _scrollLeft: '',
    current: 0,
    toView: '',
    test: '',
    posterPopup: false,
    posterItem: {},
    posterType: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChangeNav(e) {
      let {
        index
      } = e.currentTarget.dataset;
      let ele = 'scroll-item-' + index
      this.getRect('#' + ele);
      this.setData({
        current: e.currentTarget.dataset.index,
        toView: 'item' + index
      })
    },
    //获取点击元素的信息,ele为传入的id
    getRect(ele) {
      var that = this;
      //节点查询
      const query = wx.createSelectorQuery().in(this);
      query.select(ele).boundingClientRect(function (rect) {
        that.moveTo(rect);
      }).exec()
    },
    moveTo(rect) {
      let screenHalfWidth = app.globalData.systemInfo.screenWidth / 2;
      let subLeft = rect.left;
      let subHalfWidth = rect.width / 2;
      let scrollLeft = this.data._scrollLeft
      let distance = subLeft - screenHalfWidth + subHalfWidth;
      scrollLeft = scrollLeft + distance;
      this.setData({
        scrollLeft: scrollLeft
      })
    },
    scrollMove(e) {
      console.log(e)
      this.setData({
        _scrollLeft: e.detail.scrollLeft
      })
    },
    // 弹框状态
    onPopupState(e,value) {
      console.log(e)
      if (e) {
        value = e.currentTarget.dataset.value
      }
      this.setData({
        posterPopup: value,
        posterItem: e.currentTarget.dataset.item || {},
        posterType: e.currentTarget.dataset.type || false
      })
    },
    onSwitchType() {
      this.setData({
        posterType: !this.data.posterType
      })
    },
    scrollMoveY(e) {
      let index = this.calculateIndex(this.data.heightArr,e.detail.scrollTop);
      if(index == this.data.current) {
        return;
      }
      this.getRect('#scroll-item-' + index);
      this.setData({
        current: index,
      })
    },
    // 计算左边选中的下标
    calculateIndex(arr, scrollHeight) {
      let index= '';
      for(let i =0;i<arr.length;i++) {
        if (scrollHeight >= 0 && scrollHeight < arr[0]){
          index = 0;
        }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
          index = i;
        }
      }
      return index;
    },
  }
})