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

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

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

下拉菜单.gif

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

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>
            <image src="../../images/arrow_down.png" class="arrow" wx:if="{{ showIndex != index }}"></image>
            <image src="../../images/arrow_up.png" class="arrow" wx:if="{{ showIndex == index }}"></image>
        </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
        });
    }
})

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

告辞.jpg