mini-industry-antui/es/vtabs/index.js

小程序行业组件

Component({
  data: {
    tabTop: 0,
    current: 0,
    wrapScrollTop: 0
  },
  props: {
    className: '',
    tabs: [],
    animated: false,
    swipeable: true,
    tabBarActiveTextColor: '#108ee9',
    tabBarInactiveTextColor: '#333333',
    tabBarActiveBgColor: '#ffffff',
    tabBarInactiveBgColor: '#f8f8f8',
    tabBarlineColor: '#108ee9'
  },
  didMount: function didMount() {
    var _this = this;

    var tabs = this.props.tabs;

    this.isScrolling = false;
    this.anchorMap = {};
    this.timerId = null;
    this.wrapHeight = 0;
    this.scrollWrapHeight = 0;

    my.createSelectorQuery().select('.am-vtabs-slides').boundingClientRect().exec(function (ret) {
      _this.wrapHeight = ret[0].height;
    });

    var cacheHeight = 0;

    var _loop = function _loop(i) {
      var anchor = tabs[i].anchor;
      /* eslint-disable no-loop-func */

      my.createSelectorQuery().select('#am-vtab-slide-' + anchor).boundingClientRect().exec(function (ret) {
        _this.anchorMap[anchor] = cacheHeight;
        cacheHeight += ret[0].height;
        _this.scrollWrapHeight = cacheHeight;
      });
    };

    for (var i = 0; i < tabs.length; i++) {
      _loop(i);
    }
  },
  didUnmount: function didUnmount() {
    if (this.timerId) {
      clearTimeout(this.timerId);
      this.timerId = null;
    }
  },

  methods: {
    handleTabClick: function handleTabClick(e) {
      var _e$target$dataset = e.target.dataset,
          anchor = _e$target$dataset.anchor,
          index = _e$target$dataset.index;
      var onTabClick = this.props.onTabClick;

      if (onTabClick) {
        onTabClick({ anchor: anchor });
      }

      if (!this.isScrolling || !this.props.swipeable) {
        this.setData({
          wrapScrollTop: this.anchorMap[anchor],
          current: index
        });
        this.moveScrollBar(index);
      }
    },
    moveScrollBar: function moveScrollBar(current) {
      var tabTop = void 0;

      if (current < 6) {
        tabTop = 0;
      } else {
        tabTop = (current - 5) * 55;
      }

      this.setData({
        tabTop: tabTop,
        current: current
      });
    },
    onScroll: function onScroll(e) {
      var _this2 = this;

      var scrollTop = e.detail.scrollTop;

      var keys = Object.keys(this.anchorMap);

      if (this.timerId) {
        clearTimeout(this.timerId);
      }

      this.timerId = setTimeout(function () {
        _this2.isScrolling = false;
      }, 300);

      var anchorLength = keys.length;
      for (var i = 0; i < anchorLength; i++) {
        if (i === anchorLength - 1) {
          // 如果是最后一个只需满足scrollTop高于当前vtab-content的高度
          if (scrollTop >= this.anchorMap[keys[i]]) {
            this.moveScrollBar(i);
            break;
          }
        }
        if (scrollTop >= this.anchorMap[keys[i]] && scrollTop < this.anchorMap[keys[i + 1]]) {
          // 如果没个vtab-content高度小于scroll-view高度，到达底部后就不需要根据scrollTop再去判断左侧的选择项
          if (scrollTop + this.wrapHeight < this.scrollWrapHeight) {
            this.moveScrollBar(i);
          }
          break;
        }
      }
    },
    onWrapTouchMove: function onWrapTouchMove() {
      if (this.props.swipeable) {
        this.isScrolling = true;
      }
    }
  }
});