微信小程序-顶部下拉菜单实现

最近写的小程序里面需要实现顶部下拉菜单的效果，做一个过滤操作，但是没有找到相关组件，所以动手写了一个。

先看一下这拙劣的效果叭~



下面就直接看具体实现了嗷！

index.wxml

<view class="contain">
	<view class="select_box" wx:for="{{ selectList }}" wx:key="">
		<view class="select_tab {{ showIndex == index ? 'active' : '' }} {{item.active?'active':''}}" data-id="{{index}}" bindtap="chooseTab">
			<view>{{ item.active || item.name }}</view>
			<img src="../../images/arrow_down.png" class="arrow" wx:if="{{ showIndex != index }}">
			<img src="../../images/arrow_up.png" class="arrow" wx:if="{{ showIndex == index }}">
		</view>
		<scroll-view scroll-y="" class="option_list {{ showIndex == index ? 'slidedown' : 'slideup'}}">
			<view wx:for="{{ item.list }}" wx:for-item="val" wx:for-index="idx" wx:key="val.id" class="option_item {{item.active == val.content?'active_option':''}}" data-index="{{index}}" data-value="{{val.content}}" bindtap="chooseOption">{{ val.content }}</view>
		</scroll-view>
	</view>
</view>

index.wxss

page{
	background-color: #fafafa;
}
.contain{
	display: flex;
}
.select_box{
	line-height: 80rpx;
}
.select_tab{
	width: 250rpx;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 20;
}
.option_list{
	width: 250rpx;
	background-color: #fff;
	position: absolute;
	z-index: 10;
}
.option_item{
	color: #888;
	text-align: center;
}
.arrow{
	width: 45rpx;
	height: 45rpx;
}
.active{
	color: #1296db;
}
.active_option{
	color: #1296db;
	background-color: #e5f2ff;
}
.tips{
	line-height: 2;
	background-color: #fff;
	margin-top: 50rpx;
	padding: 40rpx;
}

/* 动画效果 */
@keyframes slideup {
 from {
	max-height: 600rpx;
 }
 to {
	max-height: 0;
 }
}
.slideup {
	animation: slideup 0.2s ease-in both;
}

@keyframes slidedown {
 from {
	max-height: 0;
 }
 to {
	max-height: 600rpx;
 }
}
.slidedown {
	animation: slidedown 0.2s ease-in both;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
    data: {
		selectList: [
			{
				name: 'select-1',
				list: [
					{ id: 1, content: '选项1' },
					{ id: 1, content: '选项2' },
					{ id: 1, content: '选项3' },
					{ id: 1, content: '选项4' },
					{ id: 1, content: '选项5' },
					{ id: 1, content: '选项6' },
					{ id: 1, content: '选项7' },
					{ id: 1, content: '选项8' }
				],
			},
			{
				name: 'select-2',
				list: [
					{ id: 1, content: '选项1' },
					{ id: 1, content: '选项2' },
					{ id: 1, content: '选项3' },
					{ id: 1, content: '选项4' },
					{ id: 1, content: '选项5' },
					{ id: 1, content: '选项6' },
					{ id: 1, content: '选项7' },
					{ id: 1, content: '选项8' },
					{ id: 1, content: '选项9' },
					{ id: 1, content: '选项10' }
				]
			},
			{
				name: 'select-3',
				list: [
					{ id: 1, content: '选项1' },
					{ id: 1, content: '选项2' },
					{ id: 1, content: '选项3' },
					{ id: 1, content: '选项4' },
					{ id: 1, content: '选项5' },
					{ id: 1, content: '选项6' },
					{ id: 1, content: '选项7' },
					{ id: 1, content: '选项8' },
					{ id: 1, content: '选项9' },
					{ id: 1, content: '选项10' },
					{ id: 1, content: '选项11' },
					{ id: 1, content: '选项12' },
					{ id: 1, content: '选项13' },
					{ id: 1, content: '选项14' }
				]
			}
		],
		showIndex: -1,
	},
	// 选中select_tab
	chooseTab(e){
		let index = e.currentTarget.dataset.id;
		if(index !== this.data.showIndex){
			this.setData({
				showIndex: index
			})
		}else{
			// 再次点击应该收起
			this.setData({
				showIndex: -1
			})
		}
	},
	// 选中选项
	chooseOption(e){
		let val = e.currentTarget.dataset.value,
			idx = e.currentTarget.dataset.index;
		this.setData({
			[`selectList[${idx}].active`]: val,
			showIndex: -1
		});
	}
})

完毕！希望有帮助，有问题请多多指出，菜鸡将不胜感激~