Composants communs uniapp - barre d'onglets de navigation supérieure (coulissante)
Lorsque vous utilisez uniapp pour développer des projets, la barre de navigation supérieure est souvent une exigence fonctionnelle. Cependant, le composant de barre de navigation du site officiel d'uniapp n'est parfois pas aussi satisfaisant, j'ai donc personnalisé un composant, l'ai encapsulé et misCouleur de l'arrière plan，Sélectionnez la couleur du texte，Couleur de la barre inférieureAttendez qu'il soit jeté pour que les utilisateurs puissent choisir en fonction de leurs besoins. Le code complet est donné à la fin de l'article
Citation
- Importer dans le script et enregistrer dans le composant
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
},
}
- Référencé dans le modèle de modèle
<top-tabbar :tabIndex="tabIndex" :tabBars="tabBars" @toggleToptab="toggleTab"
selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80"
bgColor="#ffffff"></top-tabbar>
Attribut (événement) Description
| nom d'attribut (événement) | taper | Valeurs par défaut | illustrer |
|---|---|---|---|
| tabIndex | Nombre | 0 | Sélectionnez l'index de la barre d'onglets |
| tabBars | Déployer | - | Contenu de l'étiquette de la barre de navigation |
| selectedBottomColor | Chaîne | '#30c58d' | La couleur de la barre inférieure lorsqu'elle est sélectionnée |
| bgCouleur | Chaîne | #ffffff | Couleur de fond de la zone de navigation |
| CouleurTexteSélectionné | Chaîne | '#343434' | Couleur du texte lorsqu'il est sélectionné |
| textColor | Chaîne | '#7d7e80' | couleur de texte par défaut |
| @toggleToptab | Fonction | - | Cliquez sur le libellé de la barre de navigation pour déclencher |
exemple de code
- < modèle >
<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>
le composantPrise en charge de l'activation de l'ombre inférieure de la barre de navigation, l'utilisateur doit ouvrir les paramètres dans le CSS interne du composant. Pour les paramètres de contenu spécifiques sous chaque barre d'onglets, il peut être utilisé conjointement avec le composant swiper dans uniapp pour de meilleurs résultats