Customize the drop-down selection box at the top of uni-app (handwritten tabList)

The following is the effect diagram display:

 

Click on different tabLists to display different boxes with animation effects

The content inside also has a corresponding highlight switching effect. The highlight color style can be imported from the outside

 When we click on the mask, this pop-up box will also be automatically closed

The usage code example is as follows:

parent component:

<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>

You can define and modify the tablist  at the top , and then modify the content in the 3 arrays below. The click event is btnOk

Here I suggest that you go to my github warehouse to pull it, and then modify it. It is relatively simple to use this as the basic framework and you don’t need to build your own wheels.

GitHub address: https://github.com/dashen-lvweijie/-tablist-.git

 

If you want to move, please post a link to my blog, creation is not easy.

Finally, thank you for watching!