uni-app の上部にあるドロップダウン選択ボックスをカスタマイズします (手書きの tabList)

以下は効果図の表示です。

 

別のタブリストをクリックして、アニメーション効果のある別のボックスを表示します

内部のコンテンツにも対応するハイライト切り替え効果があり、ハイライト カラー スタイルは外部からインポートできます。

 マスクをクリックすると、このポップアップ ボックスも自動的に閉じます。

使用コード例は次のとおりです。

親コンポーネント:

<template>
	<view>
		<tab @btnOk="btnOk" :tabTitle="tabTitle" :leftList="leftList" :centerList="centerList" :rightList="rightList" :activeColor="activeColor"></tab>
	</view>
</template>

<script>
	import tab from 'components/tablist.vue'
	export default {
		components:{
			tab
		},
		data() {
			return {
				tabTitle:[{name:'星级'},{name:'人气'},{name:'房型'},],//tab标题的数组
				leftList:[{name:'二星'},{name:'三星'},{name:'四星'},{name:'五星'}],//左侧内容区域
				centerList:[{name:'垃圾'},{name:'低级'},{name:'中级'},{name:'高级'}],//中间内容区域
				rightList:[{name:'刘德华'},{name:'张学友'},{name:'郭富城'},{name:'黎明'}],//右侧内容区域
				activeColor:['yellow','red'],//高亮颜色(前面是字体颜色后面是背景颜色)
			}
		},
		methods: {
			btnOk(e){//弹框确认事件
				console.log(e,'00000000000000');
			}
		}
	}
</script>

<style>

</style>

 上部のタブリストを定義および変更してから、下の 3 つの配列のコンテンツを変更できます。クリック イベントはbtnOkです。

ここでは、私の github ウェアハウスにアクセスしてプルし、変更することをお勧めします。これを基本フレームワークとして使用するのは比較的簡単で、独自のホイールを構築する必要はありません。

GitHub アドレス: https://github.com/dashen-lvweijie/-tablist-.git

 

移動したい場合は、私のブログへのリンクを投稿してください。作成は簡単ではありません。

最後に、ご視聴いただきありがとうございました！