dingtalk-design-miniapp/es/tabs/index.js

DingTalk Design Miniapp 提供统一钉钉风格小程序组件

"use strict";

var tabId = 0;
Component({
  mixins: [],
  data: {
    $uiName: 'tabs',
    left: null
  },
  props: {
    style: '',
    className: '',
    widthType: null,
    fullWidth: true,
    texts: [],
    tabs: null,
    // { title, hasBadge }
    activeIndex: 0,
    scrollAnimation: true,
    // 是否开启滚动动画（默认开启）
    onTap: null,
    swipeable: false,
    fixed: false,
    viewScrollLeft: 0,
    animation: true,
    duration: 500,
    onChange: null
  },
  didMount: function didMount() {
    var activeIndex = this.props.activeIndex;
    this.setData({
      tabId: tabId++
    });
    this.setInkLeft(activeIndex);
    this.adjustTabLeftMount(activeIndex);
  },
  didUpdate: function didUpdate(prevProps, prevData) {
    var _this$props = this.props,
      texts = _this$props.texts,
      activeIndex = _this$props.activeIndex,
      tabs = _this$props.tabs;
    if (prevProps.texts && texts && prevProps.texts.length !== texts.length || prevProps.tabs && tabs && prevProps.tabs.length !== tabs.length || prevProps.activeIndex !== activeIndex || prevData.tabId !== this.data.tabId) {
      this.setInkLeft(activeIndex);
      if (prevProps.activeIndex !== activeIndex) {
        this.adjustTabLeft(activeIndex);
      }
    }
  },
  didUnmount: function didUnmount() {},
  methods: {
    handleSwiperChange: function handleSwiperChange(e) {
      var onTap = this.props.onTap;
      var current = e.detail.current;
      if (onTap) {
        onTap(current);
      }
    },
    onItemTap: function onItemTap(e) {
      var _this$props2 = this.props,
        onDmItemTap = _this$props2.onDmItemTap,
        disabled = _this$props2.disabled,
        onTap = _this$props2.onTap,
        onChange = _this$props2.onChange;
      if (disabled) {
        return;
      }
      var index = e && e.target && e.target.dataset && e.target.dataset.index;
      if (onTap) {
        onTap(index);
      } else if (onDmItemTap) {
        onDmItemTap(index);
      }
      var itemDisabled = e && e.target && e.target.dataset && e.target.dataset.disabled;
      if (itemDisabled) {
        return;
      }
      if (onChange) {
        onChange(index);
      }
    },
    setInkLeft: function setInkLeft(index) {
      var _this = this;
      var _this$props3 = this.props,
        texts = _this$props3.texts,
        widthType = _this$props3.widthType,
        fullWidth = _this$props3.fullWidth,
        tabs = _this$props3.tabs;
      var tabId = this.data.tabId;
      if (dd && (widthType === 'full' || fullWidth)) {
        dd.createSelectorQuery().select("#dtm-tabs-wrap-".concat(tabId)).boundingClientRect().exec(function (ret) {
          if (ret && ret[0]) {
            var tabWidth = ret[0] && ret[0].width;
            var itemWidth = tabWidth / (tabs || texts).length || 0;
            var left = itemWidth / 2 - 20 + itemWidth * index;
            _this.setData({
              left: left
            });
          }
        });
      }
    },
    adjustTabLeftMount: function adjustTabLeftMount(activeIndex) {
      var _this2 = this;
      var tabId = this.data.tabId;
      // 初始状态下，如果 activeTab 数值较大，会将后面的 tab 前移
      var boxWidth = 0;
      var elWidth = 0;
      var elLeft = 0;
      dd.createSelectorQuery().select("#dtm-tabs-item-".concat(tabId, "-").concat(activeIndex)).boundingClientRect().exec(function (ret) {
        if (ret && ret[0]) {
          elWidth = ret[0].width;
          elLeft = ret[0].left;
          _this2.setData({
            elWidth: elWidth,
            elLeft: elLeft
          });
        }
      });
      dd.createSelectorQuery().select("#dtm-tabs-bar-content-".concat(tabId)).boundingClientRect().exec(function (ret) {
        if (ret && ret[0]) {
          boxWidth = ret[0].width;
          _this2.setData({
            boxWidth: boxWidth
          });
          setTimeout(function () {
            _this2.setData({
              viewScrollLeft: Math.floor(_this2.data.elWidth + _this2.data.elLeft - _this2.data.boxWidth)
            });
          }, 300);
        }
      });
    },
    adjustTabLeft: function adjustTabLeft(activeIndex) {
      var _this3 = this;
      var tabId = this.data.tabId;
      var boxWidth = 0;
      var elWidth = 0;
      var elLeft = 0;
      var className = "dtm-tabs-item-".concat(tabId);

      // 获取 Item 宽度
      my.createSelectorQuery().selectAll(".".concat(className)).boundingClientRect().exec(function (ret) {
        if (ret && ret[0]) {
          _this3.setData({
            tabsWidthArr: ret[0].map(function (item) {
              return item.width;
            })
          });
        }
      });

      // 获取激活元素当前 left 和 width
      dd.createSelectorQuery().select("#dtm-tabs-item-".concat(tabId, "-").concat(activeIndex)).boundingClientRect().exec(function (ret) {
        if (ret && ret[0]) {
          elWidth = ret[0].width;
          elLeft = ret[0].left;
          _this3.setData({
            elWidth: elWidth,
            elLeft: elLeft
          });
        }
      });

      // 获取容器宽度并且调整位置
      dd.createSelectorQuery().select("#dtm-tabs-bar-content-".concat(tabId)).boundingClientRect().exec(function (ret) {
        if (ret && ret[0]) {
          boxWidth = ret[0].width;
          _this3.setData({
            boxWidth: boxWidth
          });
          console.log('tabsWidthArr', _this3.data.tabsWidthArr);

          // mock el.offsetLeft
          var elOffsetLeft = _this3.data.tabsWidthArr.reduce(function (prev, cur, index) {
            if (index < activeIndex) {
              // eslint-disable-next-line no-param-reassign
              prev += cur;
            }
            return prev;
          }, 0);
          if (_this3.data.elWidth > _this3.data.boxWidth / 2) {
            setTimeout(function () {
              _this3.setData({
                viewScrollLeft: elOffsetLeft - 40
              });
            }, 300);
          } else {
            setTimeout(function () {
              _this3.setData({
                viewScrollLeft: elOffsetLeft - Math.floor(_this3.data.boxWidth / 2)
              });
            }, 300);
          }
        }
      });
    }
  }
});