Drop down menu scenario of wechat applet

design sketch ：


app.wxss file

.title{
    
    display:flex;
    flex-direction: row;
    margin:50rpx;
    justify-content: center;
}

js file

Page({
    
    data:{
    
        li:[' Default sort ',' It's closest to me ',' Lowest price ',' Highest price '],
        shownavindex:0
    },
    //  Drop down events 
    listmenu: function(e) {
    
        if (this.data.openif) {
    
            this.setData({
    
                openif: false,
                shownavindex: 0
            })
        } else {
    
            this.setData({
    
                content: this.data.li,
                openif: true,
                shownavindex: e.currentTarget.dataset.nav
            })
        }
    }
})

wxml file

<view class="title">2. Drop down menu scenario small case </view>
<view class="page">
    <!-- Navigation content -->
    <view class="nav">
        <view class="nav-item {
    {shownavindex == 1? 'active' : ''}}" bindtap="listmenu" data-nav="1">
            <view class="content"> Sort </view>
            <view class="icon"></view>
        </view>
        <view class="nav-item">
            <view class="content"> Time </view>
            <vew class="icon"></vew>
        </view>
        <view class="nav-item">
            <view class="content"> Price </view>
            <vew class="icon"></vew>
        </view>
    </view>
    <!-- Drop down content -->
    <view class="list {
    {openif ? 'down' : 'up'}} ">
        <view wx:for="{
    {content}}">
            {
    {
    item}}
        </view>
    </view>
</view>

josn file

{
    
  "usingComponents": {
    }
}

wxss file

.page{
    
    overflow: hidden;  /* Page overflow hidden */
}
.nav{
    
    position: relative;
    z-index: 1;  /* Who covers the page elements */
    display: flex;
    flex-direction: row;
    background: white;
}
.nav-item{
    
    display: flex;
    flex: 1;  /* Several contents are equally divided into screens */
    text-align: center;
    height: 90rpx;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    border: 1px solid gray;
}
.icon{
    
    border: 10rpx solid transparent;
    border-top: 10rpx solid gray;
    margin-left: 12rpx;
}
.list{
    
    display: none;  /* Not shown at first , So show none*/
    width: 100%;
    /*overflow-y: scroll;*/
    padding: 0 0 0 20rpx;
    line-height: 100rpx;
    background: white;
}
.list view{
    
    border-bottom: 1px solid gray;
    font-size: 32rpx;
}
.nav-item.active .content{
      /* Notice that there are spaces */
    color: skyblue;
}
.nav-item.active .icon{
    
    border-bottom: 10rpx solid skyblue;
    border-top: 0;
}
.down{
    
    display: block;
    animation: slidown 0.001s ease-in both;  /* Add animation */
}
@keyframes slidown{
    
    from{
    
        transform: translateY(-100%);
    }
    to{
    
        transform: translateY(0%);
    }
}
.up{
    
    display: block;
    animation: slidup 0.001s ease-in both;
}
@keyframes slidup{
    
    from{
    
        transform: translateY(0%);
    }
    to{
    
        transform: translateY(-100%);
    }
}