平台兼容性

横向选项卡

横向选项卡

props

名称 类型 默认值 描述
tabList Array 空 tab 数组，数据基本格式为[{name:'名称',icon:'图标'}]
tabCur Number 0 被选中的 tab 位置
tabClass String 空 tab 的基础样式
tabStyle String 空 tab 的基础样式
selectClass String text-blue tab 被选中项的基础样式
textFlex String false 是否平分

event

名称 描述
tabCur 被选中位置（双向）
change 点击事件

使用方式：

将组件放入你项目的components目录下。
在 script 中引用组件

import WucTab from '@/components/wuc-tab/wuc-tab.vue';

export default {
    data() {
        return {
          TabCur: 0,
          tabList: [{ name: '精选' }, { name: '订阅' }],
        }},
    components: { WucTab },
    methods: {
        tabChange(index) {
            this.TabCur = index;
        }
    }
}

在 template 中使用组件

<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>

与swiper结合实现同步更新的效果

<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
<swiper :current="TabCur" duration="300" @change="swiperChange">
  <swiper-item v-for="(item,index) in tabList" :key="index">
    <div>{{item.name}}</div>
  </swiper-item>
</swiper>

组件使用案例

详见下载后的demo目录

<template>
  <div>
    <div>
      <wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" tab-class="text-center bg-white wuc-tab fixed" select-class="text-blue" @change="tabChange"></wuc-tab>
      <div class="cu-bar bg-white solid-bottom" style="margin-top:100upx">
        <div class="action">
          <text class="cuIcon-titles text-orange"></text>基本使用(tab固定，只支持点击标签切换)
        </div>
      </div>
      <div class="bg-white padding margin text-center text-black">{{tabList[TabCur].name}}</div>
    </div>

    <div>
      <div class="cu-bar bg-white margin-top solid-bottom">
        <div class="action">
          <text class="cuIcon-titles text-orange"></text>居中选中放大(外部触发切换)
        </div>
      </div>
      <wuc-tab :tab-list="tabList2" :tabCur="TabCur2" @change="tabChange2" tab-class="text-center text-black bg-white" select-class="text-blue text-xl"></wuc-tab>
      <swiper :current="TabCur2" class="swiper" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)" @change="swiperChange2">
        <swiper-item v-for="(item,index) in tabList2" :key="index">
          <div class="bg-white padding margin text-center text-black">{{item.name}}</div>
        </swiper-item>
      </swiper>
    </div>

    <div>
      <div class="cu-bar bg-white margin-top solid-bottom">
        <div class="action">
          <text class="cuIcon-titles text-orange"></text>平分
        </div>
      </div>
      <wuc-tab :tab-list="tabList3" textFlex :tabCur.sync="TabCur3" tab-class="text-center text-black bg-white" select-class="text-orange"></wuc-tab>
      <swiper :current="TabCur3" class="swiper" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)" @change="swiperChange3">
        <swiper-item v-for="(item,index) in tabList3" :key="index">
          <div class="bg-white padding margin text-center text-black">{{item.name}}</div>
        </swiper-item>
      </swiper>
    </div>

    <div>
      <div class="cu-bar bg-white margin-top solid-bottom">
        <div class="action">
          <text class="cuIcon-titles text-orange"></text>背景
        </div>
      </div>
      <wuc-tab :tab-list="tabList4" :tabCur.sync="TabCur4" tab-class="text-center text-white bg-blue" select-class="text-white"></wuc-tab>
      <swiper :current="TabCur4" class="swiper row" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)" @change="swiperChange4">
        <swiper-item v-for="(item,index) in tabList4" :key="index">
          <div class="bg-white padding margin text-center text-black">{{item.name}}</div>
        </swiper-item>
      </swiper>
    </div>

    <div>
      <div class="cu-bar bg-white margin-top solid-bottom">
        <div class="action">
          <text class="cuIcon-titles text-orange"></text>图标
        </div>
      </div>
      <wuc-tab :tab-list="tabList5" :tabCur.sync="TabCur5" tab-class="text-center text-black bg-white" select-class="text-blue" />
      <swiper :current="TabCur5" class="swiper" duration="300" :circular="true" indicator-color="rgba(255,255,255,0)" indicator-active-color="rgba(255,255,255,0)" @change="swiperChange5">
        <swiper-item v-for="(item,index) in tabList5" :key="index">
          <div class="bg-white padding margin text-center text-black">{{item.name}}</div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import WucTab from '@/components/wuc-tab/wuc-tab.vue';

export default {
    data() {
        return {
            tabList: [
                { name: '选项卡一' },
                { name: '选项卡二' },
                { name: '选项卡三' },
                { name: '选项卡四' },
                { name: '选项卡五' },
                { name: '选项卡六' },
                { name: '选项卡七' },
                { name: '选项卡八' }
            ],
            tabList2: [{ name: '精选' }, { name: '订阅' }],
            tabList3: [{ name: '精选' }, { name: '订阅' }],
            tabList4: [
                { name: '推荐' },
                { name: '热点' },
                { name: '视频' },
                { name: '问答' },
                { name: '社会' },
                { name: '娱乐' },
                { name: '科技' },
                { name: '汽车' }
            ],
            tabList5: [
                { name: '短信', icon: 'cuIcon-comment' },
                { name: '电话', icon: 'cuIcon-dianhua' },
                { name: 'wifi', icon: 'cuIcon-wifi' }
            ],
            TabCur: 0,
            TabCur2: 0,
            TabCur3: 0,
            TabCur4: 0,
            TabCur5: 0
        };
    },

    components: { WucTab },

    computed: {},

    methods: {
        tabChange(index) {
            this.TabCur = index;
        },
        tabChange2(index) {
            this.TabCur2 = index;
        },
        swiperChange2(e) {
            let { current } = e.target;
            this.TabCur2 = current;
        },
        swiperChange3(e) {
            let { current } = e.target;
            this.TabCur3 = current;
        },
        swiperChange4(e) {
            let { current } = e.target;
            this.TabCur4 = current;
        },
        swiperChange5(e) {
            this.TabCur5 = e.target.current;
        }
    },

    onReady() {}
};
</script>
<style>
@import "~@/styles/icon.scss";
div,
scroll-view,
swiper {
    box-sizing: border-box;
}
div {
  font-size: 28upx;
  background-color: #f1f1f1;
}
.swiper {
    height: 140upx;
}

.cu-bar {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 100upx;
    justify-content: space-between;
}

.cu-bar .action {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    max-width: 100%;
  background-color: #ffffff;
}

.cu-bar .action:first-child {
    margin-left: 30upx;
    font-size: 30upx;
}

.solid,
.solid-bottom {
    position: relative;
}

.solid::after,
.solid-bottom::after{
    content: " ";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
}

.solid::after {
    border: 1upx solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after {
    border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
}

.text-orange{
  color:#f37b1d
}
.text-black{
  color:#333333;
}
.bg-white{
    background-color: #ffffff;
}

.padding {
    padding: 30upx;
}

.margin {
    margin: 30upx;
}

.margin-top {
    margin-top: 30upx;
}
.text-center {
    text-align: center;
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...