componentes comunes de uniapp: barra de pestañas de navegación superior (deslizable)
Cuando se usa uniapp para desarrollar proyectos, la barra de navegación superior suele ser un requisito funcional. Sin embargo, el componente de la barra de navegación del sitio web oficial de uniapp a veces no es tan satisfactorio, así que personalicé un componente, lo encapsulé y pusecolor de fondo,Seleccionar color de texto,Color de la barra inferiorEsperar a que se descarte para que los usuarios elijan según sus necesidades, el código completo se encuentra al final del artículo
Citación
- Importar en script y registrarse en componente
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
}, {
name: "进行中",
id: 4
}, {
name: "已结束",
id: 5
}]
};
},
methods：{
//点击导航栏标签改变当前索引
toggleTab(index) {
this.tabIndex = index
},
}
- Referenciado en la plantilla de plantilla
<top-tabbar :tabIndex="tabIndex" :tabBars="tabBars" @toggleToptab="toggleTab"
selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80"
bgColor="#ffffff"></top-tabbar>
Atributo (Evento) Descripción
| nombre del atributo (evento) | tipo | valores predeterminados | ilustrar |
|---|---|---|---|
| índice de tabulación | Número | 0 | Seleccione el índice de la barra de pestañas |
| tabBarras | Formación | - | Contenido de la etiqueta de la barra de navegación |
| color de fondo seleccionado | Cadena | '#30c58d' | El color de la barra inferior cuando se selecciona |
| bgColor | Cadena | #ffffff | Color de fondo del área de navegación |
| colorTextoSeleccionado | Cadena | '#343434' | Color del texto cuando se selecciona |
| color de texto | Cadena | '#7d7e80' | color de texto predeterminado |
| @toggleToptab | Función | - | Haga clic en la etiqueta de la barra de navegación para activar |
ejemplo de código
- < plantilla >
<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>
- < guión >
<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>
- < estilo >
<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>
el componenteAdmite activar la sombra inferior de la barra de navegación, el usuario debe abrir la configuración en el CSS interno del componente. Para la configuración de contenido específico debajo de cada barra de pestañas, se puede usar junto con el componente swiper en uniapp para obtener mejores resultados