uniapp常用组件——顶部导航选项栏(可滑动)已封装
使用uniapp开发项目时,顶部导航栏是经常会有的功能需求,然而uniapp官网的导航栏组件有时并不那么尽人意,于是我自定义了一个组件,将其封装了起来,并将背景颜色,选中文字颜色,底部横条颜色等外抛,以便使用者根据需求来选择,完整代码在文章最后已给出
引用方式
- 在script中导入并在component中注册
import topTabbar from '@/components/top-tabbar/top-tabbar.vue'
export default {
components: {topTabbar},
data() {
return {
//将选中标签的索引绑定为tabIndex,以便后续的调用
tabIndex: 0,
//导航栏标签列表数组数据结构示例,name为必须属性
tabBars: [{
name: "全部",
id: 0
}, {
name: "报名中",
id: 1
}, {
name: "待审核",
id: 2
}, {
name: "预备中",
id: 3
}]
};
},
methods:{
//点击导航栏标签改变当前索引
toggleTab(index) {
this.tabIndex = index
},
}
}
- 在template模板中引用
<top-tabbar :tabIndex="tabIndex" :tabBars="tabBars" @toggleToptab="toggleTab"
selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80"
bgColor="#ffffff"></top-tabbar>
属性(事件)说明
代码示例
- < template >
<template>
<view>
<!--顶部导航栏-->
<view class="uni-top-tabbar">
<scroll-view scroll-x class="uni-swiper-tab" :style="{backgroundColor:bgColor}">
<block v-for="(tabBar,index) in tabBars" :key="index">
<view class="swiper-tab-list" :class="{'active': tabIndex==index}" :style="{color:tabIndex==index?selectedTextColor:textColor}" @tap="toggleTab(index)">
{{tabBar.name}}
<view class="swiper-tab-line" :style="{backgroundColor:tabIndex==index?selectedBottomColor:bgColor}"></view>
</view>
</block>
</scroll-view>
</view>
</view>
</template>
- < script >
<script>
export default {
name: "topTabbar",
props: {
//选中标签栏的索引
tabIndex: {
type: Number,
default: 0
},
//导航栏标签内容
tabBars: {
type: Array,
default: [{
name: '标签1',
id: 1
},
{
name: '标签2',
id: 2
},
{
name: '标签3',
id: 3
},
{
name: '标签4',
id: 4
},
{
name: '标签5',
id: 5
},
{
name: '标签6',
id: 6
}
]
},
//选中时底部横条颜色
selectedBottomColor:{
type:String,
default:'#30c58d'
},
//导航区背景颜色
bgColor:{
type:String,
default:'#ffffff'
},
//选中时文字颜色
selectedTextColor:{
type:String,
default:'#343434'
},
//默认文本颜色
textColor:{
type:String,
default:'#7d7e80'
}
},
data() {
return {
}
},
methods: {
//点击导航栏标签触发
toggleTab(index) {
this.$emit("toggleToptab", index)
}
}
}
</script>
- < style >
<style lang="scss">
.uni-top-tabbar {
/* 以下3项设置用于开启底部阴影显示 */
/* position: relative;
z-index: 1;
overflow: visible; */
.uni-swiper-tab {
height: 100rpx;
//设置底部阴影
//box-shadow: rgba(170, 170, 170, 0.5) 0 2rpx 8rpx 0;
.swiper-tab-list {
font-size: 28rpx;
font-weight: normal;
line-height: 82rpx;
//设置标签宽度
width: 22%;
}
.active {
.swiper-tab-line {
height: 6rpx;
width: 82rpx;
margin: auto;
}
}
}
}
</style>
该组件支持开启导航栏底部阴影,需使用者自行在组件内部CSS中开启设置,对于每个标签栏下的具体内容设置,可结合uniapp中swiper组件搭配使用,效果更佳
本文来自:https://blog.csdn.net/poppingJ/article/details/108361892
仅供自己学习使用