uniapp 共通コンポーネント - トップ ナビゲーション タブ バー (スライド可能)
uniapp を使ってプロジェクトを開発する場合、上部のナビゲーション バーが機能要件になることがよくありますが、uniapp 公式 Web サイトのナビゲーション バー コンポーネントでは満足できない場合があるため、コンポーネントをカスタマイズしてカプセル化し、配置しました。背景色，文字色を選択，ボトムバーの色ユーザーが必要に応じて選択できるように、それが破棄されるのを待ちます. 完全なコードは記事の最後に記載されています.
引用
- スクリプトにインポートしてコンポーネントに登録する
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
},
}
- テンプレート テンプレートで参照
<top-tabbar :tabIndex="tabIndex" :tabBars="tabBars" @toggleToptab="toggleTab"
selectedBottomColor="#30c58d" selectedTextColor="#343434" textColor="#7d7e80"
bgColor="#ffffff"></top-tabbar>
属性 (イベント) 説明
| 属性 (イベント) 名 | タイプ | デフォルト | 例証する |
|---|---|---|---|
| タブインデックス | 番号 | 0 | タブバーのインデックスを選択 |
| タブバー | 配列 | - | ナビゲーション バーのラベル コンテンツ |
| selectedBottomColor | 弦 | 「#30c58d」 | 選択時のボトムバーの色 |
| bgColor | 弦 | #ffffff | ナビゲーションエリアの背景色 |
| selectedTextColor | 弦 | 「#343434」 | 選択時の文字色 |
| テキストの色 | 弦 | 「#7d7e80」 | デフォルトのテキストの色 |
| @トグルトップタブ | 関数 | - | ナビゲーション バーのラベルをクリックしてトリガーします |
コード例
- <テンプレート>
<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>
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 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>
コンポーネントナビゲーション バーの下の影をオンにするサポート, the user needs to open the settings in the component's internal CSS. 各タブ バーの下の特定のコンテンツ設定については、より良い結果を得るために uniapp のswiper コンポーネントと組み合わせて使用できます。