更新记录

1.0.0（2021-03-01）

tab选项卡，可滑动，兼容nvue，微信小程序， 浏览器

平台兼容性

使用文档

感谢uViewUi 根据uViewUi的tabs组件修改，在nvue下使用更好用

属性
属性名 说明 类型 默认值 可取值
isScroll tab导航栏是否可滚动 Boolean true true/false
list 要渲染的导航栏数据 String 空 下面详解
current 当前活跃的tab索引 Number|String 0 数字
height 导航栏高度 Number|String 80 传数字单位为rpx，也可传带单位的字符串
fontSize 字体大小 Number|String 30 传数字单位为rpx，也可传带单位的字符串
duration 过渡动画时长 Number 500 单位ms
activeColor 当前活跃tab的颜色 String rgba(50, 145, 248, 1) 色号
inactiveColor 为选中tab颜色 String #303133 色号
barWidth tab底部bar宽度 Number｜String 40 传数字单位为rpx，也可传带单位的字符串
barHeight tab底部bar高度 Number｜String 6 传数字单位为rpx，也可传带单位的字符串
itemPx 单个tab的左右内边距 Number｜String 30 传数字单位为rpx，也可传带单位的字符串
bgColor 导航栏背景色 String #fff 色号
offset 徽章x轴偏移量 Number 140 传数字单位为rpx
bold 活跃tab文字是否加粗 Boolean true true/false
activeItemStyle 自定义活跃tab样式 Object {} vue绑定style写法
showBar 是否显示底部滑块 Boolean true true/false
barStyle 自定义滑块样式 Object {} vue绑定style写法
itemWidth 单个tab的宽度 Number｜String 'auto' 传数字单位为rpx，也可传带单位的字符串
  • duration css 动画在nvue模式下不能有时间单位
事件
属性名 说明 返回值
@change tab切换时出发 要切换的tab索引
list格式要求
list: [
            {
          name: '标签名', // tab显示的文字
          count: 11  // 徽章数字 0 或 不传值    不显示
        },
            ],
使用实例
<template>
    <view class="content" :style="h100">
        <f-tab ref="fTab" bg-color="#fff" :bold="bold" :active-color="activeColor" :list="list" @change="change" :current="current"
         :itemWidth="'200rpx'" :is-scroll="isScroll"></f-tab>
        <!-- #ifdef APP-NVUE -->
        <swiper @change="swiperChange" :current="current" :ref="list_id" class="swiper_item" :style="swiperStyle">
            <template v-for="(listItem, index) in msgList">
                <swiper-item :key="listItem.id" :stye="swiperItemStyle">
                    <list class="list_wrapper">
                        <cell v-for="item in listItem.msgs" :key="item.id">
                            <view class="list_item">
                                <view class="img_box">
                                    <image class="img_size" :src="item.img" mode=""></image>
                                </view>
                                <view class="item_content">
                                    <text class="item_title">{{item.title}}</text>
                                    <text class="item_content_size">{{item.content}}</text>
                                </view>
                            </view>
                        </cell>
                    </list>
                </swiper-item>
            </template>
        </swiper>
        <!-- #endif -->

        <!-- #ifndef APP-NVUE -->
        <swiper @change="swiperChange" :current="current" :id="list_id" class="swiper_item" :style="swiperStyle">
            <template v-for="(listItem, index) in msgList">
                <swiper-item :key="listItem.id" :stye="swiperItemStyle">
                    <scroll-view scroll-y class="list_wrapper">
                        <view v-for="item in listItem.msgs" :key="item.id">
                            <view class="list_item">
                                <view class="img_box">
                                    <image class="img_size" :src="item.img" mode="aspectFill"></image>
                                </view>
                                <view class="item_content">
                                    <text class="item_title">{{item.title}}</text>
                                    <text class="item_content_size">{{item.content}}</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
            </template>
        </swiper>
        <!-- #endif -->
    </view>

</template>

<script>
    import FTab from '@/components/f_tab/f_tab.vue'
    import {
        page
    } from '@/components/f_tab/mixins.js'
    export default {
        mixins: [page],
        components: {
            FTab
        },
        data() {
            return {
                bold: true,
                activeColor: '#f40',
                isScroll: false,
                current: 0,
                tabHeight: 0,
                list_id: 'f_tab' + Math.round(Math.random() * 1000),
                list: [{
                        name: '第一个'
                    },
                    {
                        name: '第二个',
                        count: '11'
                    },
                    {
                        name: '第三个'
                    }
                ],
                msgList: [{
                        id: 0,
                        msgs: [{

                                id: 31,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...',
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...',
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...',
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 'f_tab' + Math.round(Math.random() * 1000),
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            }
                        ]
                    },
                    {
                        id: 1,
                        msgs: [{

                                id: 26,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 21,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...',
                            },
                            {
                                id: 22,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 23,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            }
                        ]
                    },
                    {
                        id: 2,
                        msgs: [{
                                id: 10,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...',
                            },
                            {
                                id: 11,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 12,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            },
                            {
                                id: 13,
                                title: '你猜我是谁',
                                date: '2021-02-11 13:01',
                                img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201412%2F15%2F20141215151225_kQSkZ.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616652335&t=e8ec7ded233b8a6f7ff5b70e9253f04b',
                                content: '老衲收了你，噫嘻嘻嘻嘻...'
                            }
                        ]
                    }
                ]
            }
        },
        onLoad() {
            this.$nextTick(async () => {
                // tab导航按钮高度 用于消息滚动定位
                this.tabHeight = this.$refs.fTab.height
                const winSize = uni.getSystemInfoSync()
            })
        },
        computed: {
            swiperStyle() {
                let top
                // #ifdef H5
                top = uni.upx2px(this.tabHeight + 20) + this.windowTop
                // #endif
                // #ifndef H5
                top = uni.upx2px(this.tabHeight + 20)
                // #endif
                const height = this.winHeight - uni.upx2px(this.tabHeight + 20)
                let width = 750
                let style = `width: ${width}rpx; top: ${top}px; height: ${height}px;`
                return style
            },
            swiperItemStyle() {
                const height = this.winHeight - uni.upx2px(this.tabHeight + 20)
                let width = 750
                let style = `width: ${width}rpx; height: ${height}px;`
                return style
            }
        },
        methods: {
            change(e) {
                this.current = e
            },
            swiperChange(e) {
                const {
                    current
                } = e.detail
                this.current = current
            }
        }
    }
</script>

<style scoped>
    .content {
        background-color: #eee;
    }

    .swiper_item {
        position: fixed;
        background-color: #fff;
    }

    .list_wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .list_item {
        /* #ifndef APP-NVUE */
        display: flex;
        box-sizing: border-box;
        /* #endif */
        flex-direction: row;
        height: 140rpx;
        overflow: hidden;
        padding: 0rpx 20rpx;
        align-items: center;
        border-bottom-color: #eee;
        border-bottom-width: 2rpx;
    }

    .img_box {
        height: 100rpx;
        width: 100rpx;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        border-radius: 200rpx;
        border-width: 4rpx;
        border-color: #C0C0C0;
        margin-right: 20rpx;
    }

    .img_size {
        height: 180rpx;
        width: 180rpx;
    }

    .item_content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
    }

    .item_title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .item_content_size {
        font-size: 26rpx;
        color: #accaca;
    }
</style>

隐私、权限声明

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

无

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

无

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

无

许可协议

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

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

加载更多...