自定义 tab 选项卡 2

选项卡组件

1.pages.json

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "scroll-tabs": "@/components/ScrollTabs/index.vue",
        }
    },
......
}

2.index.vue

<template>
  <view class="pages">
    <view class="news_list">
      <scroll-tabs  v-model="newsType" tabs="tabs" @change="changeTab"></scroll-tabs>
       <swiper class="tabs_swiper" 
            :current="newsType" 
            @change="changeSwiper"
            @transition="handleOnTransition">
            <swiper-item :label="item" v-for="(item,index) in tabs" :key="index">
              <template v-if="actMap[index]">
                <news-list v-if="item==='全部'"/>
                <news-list v-else-if="item==='tabs1'" />
                <video-list v-else-if="item==='tabs2'"/>
                <news-list v-else-if="item==='tabs3'"/>
                <news-list v-else-if="item==='tabs4'"/>
              </template>
           </swiper-item>
        </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data(){
      return{
        newsType:0,
        actMap: { 0: true }, // 已经加载的 tab, 用来优化 tab 一次性全部加载的问题
        tabs:['全部','tabs1','tabs2','tabs3','tabs4']
      }
    },
    computed: {
      _windowWidth () {
        return uni.$deviceInfo.windowWidth
      },
    }
    methods:{
      changeTab(type){
        this.newsType = type
      },
      changeSwiper(e) {
        this.newsType = e.detail.current
      },
      handleOnTransition(e){
        /**
        * 用来在 swiper 切换时，提前判定当前 item 是否需要加载，以用来优化页面加载触发时间，优化加载速度
        * 由于 handleOnChange 触发时间是动画结束后，item 加载触发过慢
        */
        const { dx } = e.detail
        if (dx > 0 && Math.abs(dx) > this._windowWidth / 2) {
          this.$set(this.actMap, this.newsType + 1, true)
        }
        if (dx < 0 && Math.abs(dx) > this._windowWidth / 2) {
          this.$set(this.actMap, this.newsType - 1, true)
        }
      }
    },
 }
</script>

<style lang=scss>
</style>