更新记录
1.0.0(2021-03-01)
下载此版本
tab选项卡,可滑动,兼容nvue,微信小程序, 浏览器
平台兼容性
HbuilderX/cli最低兼容版本 |
3.0.3 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用文档
感谢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>