first commit

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-tabs/props.js

@@ -0,0 +1,67 @@
+"use strict";
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const props = {
+  props: {
+    // 滑块的移动过渡时间，单位ms
+    duration: {
+      type: Number,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.duration
+    },
+    // tabs标签数组
+    list: {
+      type: Array,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.list
+    },
+    // 滑块颜色
+    lineColor: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.lineColor
+    },
+    // 菜单选择中时的样式
+    activeStyle: {
+      type: [String, Object],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.activeStyle
+    },
+    // 菜单非选中时的样式
+    inactiveStyle: {
+      type: [String, Object],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.inactiveStyle
+    },
+    // 滑块长度
+    lineWidth: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.lineWidth
+    },
+    // 滑块高度
+    lineHeight: {
+      type: [String, Number],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.lineHeight
+    },
+    // 滑块背景显示大小，当滑块背景设置为图片时使用
+    lineBgSize: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.lineBgSize
+    },
+    // 菜单item的样式
+    itemStyle: {
+      type: [String, Object],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.itemStyle
+    },
+    // 菜单是否可滚动
+    scrollable: {
+      type: Boolean,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.scrollable
+    },
+    // 当前选中标签的索引
+    current: {
+      type: [Number, String],
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.current
+    },
+    // 默认读取的键名
+    keyName: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.tabs.keyName
+    }
+  }
+};
+exports.props = props;

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-tabs/u-tabs.acss

@@ -0,0 +1,64 @@
+.u-empty.data-v-02b0c54f,
+.u-empty__wrap.data-v-02b0c54f,
+.u-tabs.data-v-02b0c54f,
+.u-tabs__wrapper.data-v-02b0c54f,
+.u-tabs__wrapper__scroll-view-wrapper.data-v-02b0c54f,
+.u-tabs__wrapper__scroll-view.data-v-02b0c54f,
+.u-tabs__wrapper__nav.data-v-02b0c54f,
+.u-tabs__wrapper__nav__line.data-v-02b0c54f {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+.u-tabs__wrapper.data-v-02b0c54f {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.u-tabs__wrapper__scroll-view-wrapper.data-v-02b0c54f {
+  flex: 1;
+  overflow: auto hidden;
+}
+.u-tabs__wrapper__scroll-view.data-v-02b0c54f {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+.u-tabs__wrapper__nav.data-v-02b0c54f {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+.u-tabs__wrapper__nav__item.data-v-02b0c54f {
+  padding: 0 11px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.u-tabs__wrapper__nav__item--disabled.data-v-02b0c54f {
+  cursor: not-allowed;
+}
+.u-tabs__wrapper__nav__item__text.data-v-02b0c54f {
+  font-size: 30rpx;
+  color: #606266;
+  white-space: nowrap !important;
+}
+.u-tabs__wrapper__nav__item__text--disabled.data-v-02b0c54f {
+  color: #c8c9cc !important;
+}
+.u-tabs__wrapper__nav__line.data-v-02b0c54f {
+  height: 3px;
+  background: #3c9cff;
+  width: 30px;
+  position: absolute;
+  bottom: 2px;
+  border-radius: 100px;
+  transition-property: transform;
+  transition-duration: 300ms;
+}

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-tabs/u-tabs.axml

@@ -0,0 +1 @@
+<view class="u-tabs data-v-02b0c54f"><view class="u-tabs__wrapper data-v-02b0c54f"><slot name="left"/><view class="u-tabs__wrapper__scroll-view-wrapper data-v-02b0c54f"><scroll-view scroll-x="{{e}}" scroll-left="{{f}}" scroll-with-animation class="u-tabs__wrapper__scroll-view data-v-02b0c54f" show-scrollbar="{{false}}" ref="u-tabs__wrapper__scroll-view"><view class="u-tabs__wrapper__nav data-v-02b0c54f" ref="u-tabs__wrapper__nav"><view a:for="{{a}}" a:for-item="item" a:key="f" onTap="{{item.g}}" ref="{{item.h}}" style="{{b + ';' + c}}" class="{{('u-tabs__wrapper__nav__item') + ' ' + 'data-v-02b0c54f' + ' ' + item.i + ' ' + item.j}}"><text class="{{(item.b) + ' ' + 'u-tabs__wrapper__nav__item__text' + ' ' + 'data-v-02b0c54f'}}" style="{{item.c}}">{{item.a}}</text><u-badge class="data-v-02b0c54f" u-i="{{item.d}}" onVI="__l" u-p="{{item.e}}"></u-badge></view><view class="u-tabs__wrapper__nav__line data-v-02b0c54f" ref="u-tabs__wrapper__nav__line" style="{{d}}"></view></view></scroll-view></view><slot name="right"/></view></view>

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-tabs/u-tabs.js

@@ -0,0 +1,208 @@
+"use strict";
+const uni_modules_uviewPlus_components_uTabs_props = require("./props.js");
+const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
+const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
+const common_vendor = require("../../../../common/vendor.js");
+const _sfc_main = {
+  name: "u-tabs",
+  mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uTabs_props.props],
+  data() {
+    return {
+      firstTime: true,
+      scrollLeft: 0,
+      scrollViewWidth: 0,
+      lineOffsetLeft: 0,
+      tabsRect: {
+        left: 0
+      },
+      innerCurrent: 0,
+      moving: false
+    };
+  },
+  watch: {
+    current: {
+      immediate: true,
+      handler(newValue, oldValue) {
+        if (newValue !== this.innerCurrent) {
+          this.innerCurrent = newValue;
+          this.$nextTick(() => {
+            this.resize();
+          });
+        }
+      }
+    },
+    // list变化时，重新渲染list各项信息
+    list() {
+      this.$nextTick(() => {
+        this.resize();
+      });
+    }
+  },
+  computed: {
+    textStyle() {
+      return (index) => {
+        const style = {};
+        const customeStyle = index === this.innerCurrent ? uni_modules_uviewPlus_libs_function_index.addStyle(this.activeStyle) : uni_modules_uviewPlus_libs_function_index.addStyle(this.inactiveStyle);
+        if (this.list[index].disabled) {
+          style.color = "#c8c9cc";
+        }
+        return uni_modules_uviewPlus_libs_function_index.deepMerge(customeStyle, style);
+      };
+    },
+    propsBadge() {
+      return uni_modules_uviewPlus_libs_config_props.defProps.badge;
+    }
+  },
+  async mounted() {
+    this.init();
+  },
+  emits: ["click", "change"],
+  methods: {
+    addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
+    addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
+    setLineLeft() {
+      const tabItem = this.list[this.innerCurrent];
+      if (!tabItem) {
+        return;
+      }
+      let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
+      const lineWidth = uni_modules_uviewPlus_libs_function_index.getPx(this.lineWidth);
+      this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
+      if (this.firstTime) {
+        setTimeout(() => {
+          this.firstTime = false;
+        }, 10);
+      }
+    },
+    // nvue下设置滑块的位置
+    animation(x, duration = 0) {
+    },
+    // 点击某一个标签
+    clickHandler(item, index) {
+      this.$emit("click", {
+        ...item,
+        index
+      }, index);
+      if (item.disabled)
+        return;
+      this.innerCurrent = index;
+      this.resize();
+      this.$emit("change", {
+        ...item,
+        index
+      }, index);
+    },
+    init() {
+      uni_modules_uviewPlus_libs_function_index.sleep().then(() => {
+        this.resize();
+      });
+    },
+    setScrollLeft() {
+      const tabRect = this.list[this.innerCurrent];
+      const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
+        return total + curr.rect.width;
+      }, 0);
+      const windowWidth = uni_modules_uviewPlus_libs_function_index.sys().windowWidth;
+      let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2;
+      scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
+      this.scrollLeft = Math.max(0, scrollLeft);
+    },
+    // 获取所有标签的尺寸
+    resize() {
+      if (this.list.length === 0) {
+        return;
+      }
+      Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+        this.tabsRect = tabsRect;
+        this.scrollViewWidth = 0;
+        itemRect.map((item, index) => {
+          this.scrollViewWidth += item.width;
+          this.list[index].rect = item;
+        });
+        this.setLineLeft();
+        this.setScrollLeft();
+      });
+    },
+    // 获取导航菜单的尺寸
+    getTabsRect() {
+      return new Promise((resolve) => {
+        this.queryRect("u-tabs__wrapper__scroll-view").then((size) => resolve(size));
+      });
+    },
+    // 获取所有标签的尺寸
+    getAllItemRect() {
+      return new Promise((resolve) => {
+        const promiseAllArr = this.list.map((item, index) => this.queryRect(
+          `u-tabs__wrapper__nav__item-${index}`,
+          true
+        ));
+        Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
+      });
+    },
+    // 获取各个标签的尺寸
+    queryRect(el, item) {
+      return new Promise((resolve) => {
+        this.$uGetRect(`.${el}`).then((size) => {
+          resolve(size);
+        });
+      });
+    }
+  }
+};
+if (!Array) {
+  const _easycom_u_badge2 = common_vendor.resolveComponent("u-badge");
+  _easycom_u_badge2();
+}
+const _easycom_u_badge = () => "../u-badge/u-badge.js";
+if (!Math) {
+  _easycom_u_badge();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.f(_ctx.list, (item, index, i0) => {
+      return {
+        a: common_vendor.t(item[_ctx.keyName]),
+        b: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item__text--disabled"),
+        c: common_vendor.s($options.textStyle(index)),
+        d: "02b0c54f-0-" + i0,
+        e: common_vendor.p({
+          show: !!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value)),
+          isDot: item.badge && item.badge.isDot || $options.propsBadge.isDot,
+          value: item.badge && item.badge.value || $options.propsBadge.value,
+          max: item.badge && item.badge.max || $options.propsBadge.max,
+          type: item.badge && item.badge.type || $options.propsBadge.type,
+          showZero: item.badge && item.badge.showZero || $options.propsBadge.showZero,
+          bgColor: item.badge && item.badge.bgColor || $options.propsBadge.bgColor,
+          color: item.badge && item.badge.color || $options.propsBadge.color,
+          shape: item.badge && item.badge.shape || $options.propsBadge.shape,
+          numberType: item.badge && item.badge.numberType || $options.propsBadge.numberType,
+          inverted: item.badge && item.badge.inverted || $options.propsBadge.inverted,
+          customStyle: "margin-left: 4px;"
+        }),
+        f: index,
+        g: common_vendor.o(($event) => $options.clickHandler(item, index)),
+        h: `u-tabs__wrapper__nav__item-${index}`,
+        i: common_vendor.n(`u-tabs__wrapper__nav__item-${index}`),
+        j: common_vendor.n(item.disabled && "u-tabs__wrapper__nav__item--disabled")
+      };
+    }),
+    b: common_vendor.s($options.addStyle(_ctx.itemStyle)),
+    c: common_vendor.s({
+      flex: _ctx.scrollable ? "" : 1
+    }),
+    d: common_vendor.s({
+      width: $options.addUnit(_ctx.lineWidth),
+      transform: `translate(${$data.lineOffsetLeft}px)`,
+      transitionDuration: `${$data.firstTime ? 0 : _ctx.duration}ms`,
+      height: $options.addUnit(_ctx.lineHeight),
+      background: _ctx.lineColor,
+      backgroundSize: _ctx.lineBgSize
+    }),
+    e: _ctx.scrollable,
+    f: $data.scrollLeft
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-02b0c54f"]]);
+my.createComponent(Component);

unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-tabs/u-tabs.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "u-badge": "../u-badge/u-badge"
+  }
+}