assess-app/uni_modules/k-tabs-swiper

插件说明

支持静态tab、滑动tab以及swiper联动

---

示例

目录：uni_modules/k-tabs-swiper/components/example

使用说明

1、基本用法

• 视图

  <k-tabs-swiper
  v-model="current"
  :tabs="tabs"
  bgColor="#1EBB81"
  color="rgba(255,255,255,0.8)"
  activeColor="#FFFFFF"
  fontSize="28rpx"
  :bold="true"
  :scroll="true"
  height="100rpx"
  lineHeight="10rpx"
  @change="changeTab"
  paddingItem="0 50rpx"
  />
  

• 脚本

  current: 0,
  tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
  

  2、胶囊用法

• 视图

  <k-tabs-swiper
  v-model="current" 
  :tabs="tabs" 
  :pills="true"
  bgColor="#1EBB81"
  color="rgba(255,255,255,0.8)"
  activeColor="#FFFFFF"
  fontSize="28rpx"
  pillsColor="red"
  :bold="true"
  pillsBorderRadius="100rpx"
  height="100rpx"
  :lineScale="0.8"
  @change="changeTab"
  paddingItem="0 50rpx"
  />
  

• 脚本

  data() {
          return {
              current: 0,
              tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
          }
      }
  

  3、自定义下划线

• 视图

  <k-tabs-swiper
  v-model="current"
  :tabs="tabs"
  :pills="true"
  bgColor="#1EBB81"
  color="rgba(255,255,255,0.8)"
  activeColor="#FFFFFF"
  fontSize="28rpx"
  pillsColor="red"
  :bold="true"
  pillsBorderRadius="100rpx"
  height="100rpx"
  @change="changeTab"
  paddingItem="0 50rpx"
  :lineSlot="true"
  >
  <image
      class="line_img" slot="line"
      src="../../static/k-tabs-swiper/img.png"
      mode="scaleToFill"
  />
  </k-tabs-swiper>
  

• 脚本

  data() {
          return {
              current: 0,
              tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
          }
      }
  

  4、tabs与swiper联动

• 视图

  <k-tabs-swiper
  v-model="current"
  :tabs="tabs"
  :tabsSwiper="true"
  bgColor="#1EBB81"
  color="rgba(255,255,255,0.8)"
  activeColor="#FFFFFF"
  fontSize="28rpx"
  lineColor="#FFFFFF"
  :bold="true"
  :scroll="true"
  :fixed="true"
  height="100rpx"
  lineHeight="10rpx"
  @change="changeTab"
  @load="load"
  paddingItem="0 50rpx"
  >
  <template slot="swiperContent" slot-scope="{index}">
  <view class="item" :class="{
      'item-active': itemIndex % 2
  }" v-for="(item,itemIndex) in tabsLists[index]" :key="itemIndex">
      {{itemIndex}}
  </view>
  <view class="loading">触发到底部自行填充数据</view>
  </template>
  </k-tabs-swiper>
  

• 脚本

  export default{
  data() {
      return {
          current: 0,
          tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
          tabsLists:[],
          isListFinished: [],
      }
  },
  onLoad(options) {
      this.init();
  },
  methods: {
      //此为测试用方法
      init(){
          this.tabsLists = new Array(20).fill([]);
          this.tabs.forEach((item,index) => {
              this.isListFinished.push({
                  canLoad:true,
                  pageNum:0,
                  pageSize:20
              });
          })
          this.changeTab(0);
      },
      getData(index){
          let newArr = new Array(20).fill([]);
          this.$set(this.tabsLists,index,this.tabsLists[index].concat(newArr))
      },
      load(index){
          this.isListFinished[index].pageNum++;
          uni.showToast({
              title: `第${index}个触发底部，页码${this.isListFinished[index].pageNum}`,
              icon: 'none',
          })
          this.getData(index)
      },
      changeTab(index){
          uni.showToast({
              title: `第${index}个`,
              icon: 'none',
          })
          this.getData(index)
      }
  },
  }
  

文档说明

---

1、属性说明

参数|类型|默认值|说明 -|-|-|- tabs | Array | [] | 控制 tab 的列表 value|Number|0|必传(双向绑定的值) color|String|'#333'|默认文字颜色 activeColor|String|'#2979ff'|选中文字的颜色 fontSize|String|'28rpx'|默认文字大小 activeFontSize|String|'28rpx'|选中文字大小 bold|Boolean|true|是否加粗选中项 scroll|Boolean|true|是否显示滚动条，平铺设置 false height|String|'70rpx'|tab 高度(rpx 或 px) lineHeight|String|'10rpx'|滑块高度(rpx 或 px) lineColor|String|'#2979ff'|滑块的颜色 lineScale|Number|0.5|滑块宽度缩放值 lineRadius|String|'10rpx'|滑块圆角宽度 pills|Boolean|false|是否开启胶囊 pillsColor|String|'#2979ff'|胶囊背景颜色 pillsBorderRadius|String|'10rpx'|胶囊圆角宽度 field|String|''|如果 tabs 子项是对象，输入需要展示的键名 bgColor|String|'#fff'|背景色，支持 linear-gradient 渐变 padding|String|'0'|整个 tab padding 属性 fixed|Boolean|false|是否固定在顶部 paddingItem|String|'0 22rpx'|选项的边距（设置上下不生效，需要设置高度） lineAnimation|Boolean|true|是否需要 line 和 pills 的动画，在隐藏页面后默认移动到第一个的时候比较实用 zIndex|Number|1993|控制 tab 的层级，默认1993 lineSlot|Boolean|false|是否自定义底部滑块 tabsSwiper|Boolean|false|是否使用swiper paddingBottom|String|'0rpx'|swiper下边padding duration|Number|500|swiper滑动动画时长 contentHeight|String|''|swiper内容高度 swiperType|Boolean|false|swiper类型-因为过多swiper会出现性能问题，因此增加了替代方案，可自行选择 circular|Boolean|false|是否采用衔接滑动，即播放到末尾后重新回到开头

2、事件说明

名称|参数|说明 -|-|- change | index | 改变tab选中项触发, index 选中项的下标 load | index | swiper触底