微信小程序-頂部下拉菜單實現

最近寫的小程序里面需要實現頂部下拉菜單的效果，做一個過濾操作，但是沒有找到相關組件，所以動手寫了一個。

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

下面就直接看具體實現了嗷！

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
		});
	}
})

完畢！希望有幫助，有問題請多多指出，菜雞將不勝感激~