更新记录

1.1.0（2022-09-27）

• 优化左右滑动切换

1.0.9（2022-09-17）

• 增加滚动导航scrollspy
• 增加before-change ，用于切换标签前的回调函数
• 增加no-render-conent，可使用该属性关闭标签内容的渲染

1.0.8（2022-09-14）

• 支持vue3
• 支持nvue
• 增加tab-click-scroll-top，用于标签标题点击页面回滚到顶部

平台兼容性

yui-tabs 关于标签页组件

• Tips
• 支持的平台
• 使用示例
• 滚动吸顶示例
• tabs数组参数
• Tabs Props
• Tabs Events
• Tabs Slots
• 注意事项及常见问题

• 组件于2022.09.25 13:00有改动，若有bug，请更新最新代码尝试是否修复。
• 请保证HBuilderX正式版为 v3.4.18、Alpha版为 v3.5.1，否则用于渲染tab内容的动态插槽无效。
• 该插件使用的预编译，需要自行安装less插件。
• 如果发现组件有bug或者不完善可以留言交流。
• 如需详细的了解本组件，请下载示例项目ZIP运行查看效果(标签页组件在uni_modules/yui-tabs下)。
• 旧版本放在uni_modules/yui-tabs/version中。
• 关于标签栏滚动吸顶提供了两种实现方式,具体可查看示例项目中的演示。
• 由于vue3不支持小程序端的标签内容展示，为此重构了一个新的标签页组件，以后的优化同样会侧重于此；本组件仍旧会修复相关bug。 新标签页组件地址
• 右侧的微信小程序码可以查看具体的效果。

• H5、app-vue、微信、支付宝、钉钉、百度、字节、QQ小程序可用，其他的小程序平台可自行测试。
• 暂不支持nvue。
• vue3版本仅支持H5、app-vue，若想支持小程序端，请移步上面的新标签页地址。

<template>
 <view>
     <yui-tabs :tabs="tabs" v-model="activeIndex" @click="tabClick" @change="tabChange">
        <template #pane0>
            <view class="content-wrap">内容1</view>
        </template>
        <template #pane1>
            <view class="content-wrap">内容2</view>
        </template>
        <template #pane2>
            <view class="content-wrap">内容3</view>
        </template>
        <template #pane3>
            <view class="content-wrap">内容4</view>
        </template>
        <template #pane4>
            <view class="content-wrap">内容5</view>
        </template>
     </yui-tabs>
 </view>
</template>
<script>
    export default {
        data() {
            return {
                tabs: Array.from({
                    length: 5
                }, (o, i) => `标签${i+1}`),
                activeIndex: 0,
            }
        },
        methods: {
            // 标签点击事件
            tabClick(index, item) {
                console.log("tabClick", index, item);
            },
            // 标签切换事件
            tabChange(index, item) {
                console.log("tabChange", index, item);
            }
        }
    }
</script>

• 本示例只展示使用sticky方式实现的标签栏吸顶

• 直接开启sticky属性，并结合页面生命周期onPageScroll，调用uni.$emit('onPageScroll', e)，否则无法吸顶

  <template>
  <view>
   <yui-tabs :tabs="tabs" v-model="activeIndex" sticky :offsetTop="offsetTop">
      <template #pane0>
          <view class="content-wrap">内容1</view>
      </template>
      <template #pane1>
          <view class="content-wrap">内容2</view>
      </template>
      <template #pane2>
          <view class="content-wrap">内容3</view>
      </template>
      <template #pane3>
          <view class="content-wrap">内容4</view>
      </template>
      <template #pane4>
          <view class="content-wrap">内容5</view>
      </template>
   </yui-tabs>
  </view>
  </template>
  <script>
  export default {
      data() {
          return {
              tabs: Array.from({
                  length: 5
              }, (o, i) => `标签${i+1}`),
              activeIndex: 0,
              offsetTop: 0, //粘性定位布局下与顶部的最小距离
          }
      },
      mounted() {
          uni.getSystemInfo({
              success: (e) => {
                  let offsetTop = 0
                  // #ifdef H5
                  offsetTop = 43
                  // #endif
  
                  this.offsetTop = offsetTop;
              }
          })
      },
      // 页面滚动触发事件
      onPageScroll(e) {
          //页面滚动事件
          uni.$emit('onPageScroll', e)
      },
  }
  </script>
  <style>
  .content-wrap{
  height:200vh;
  }
  </style>

注意:

• 请勿在组件初始化之后删除或添加tabs数组，否则会导致组件内部重新初始化一遍
• 在组件初始化之后，仅支持更改label,badge,dot的值

通过 ref 可以获取到 Tabs 实例并调用实例方法.

1. 关于swiper属性对于标签内容左右滑动的实现方式，何时使用swpier组件实现，何时使用默认方式实现？

   • 默认实现下，如果启用swipe-animated拖动动画，在左右滑动时极易触发上下滑动，建议如下：

   • 想保留页面级的上拉加载与下拉刷新事件

   • 或者只想要标题栏部分的切换功能，不使用插槽渲染出标签内容，自己去实现具体的展示内容

   • swpier组件实现下，由于该组件是absolute定位，需要给定标签内容具体的高度，无法触发页面级的上拉加载与下拉刷新事件，建议如下：

   • 想有良好的左右滑动效果，每个标签内容卡片中互不影响，各自使用scroll-view组件承载内容

   • 由于无法触发页面级的上拉加载与下拉刷新事件，因此需要去插件市场找类似的插件