标签：flex 场景 translateY solid 微信 display nav border 下拉菜单

效果图：


js文件

Page({
    data:{
        li:['默认排序','离我最近','价格最低','价格最高'],
        shownavindex:0
    },
    // 下拉事件
    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文件

<view class="title">2.下拉菜单场景小案例</view>
<view class="page">
    <!--导航内容-->
    <view class="nav">
        <view class="nav-item {{shownavindex == 1? 'active' : ''}}" bindtap="listmenu" data-nav="1">
            <view class="content">排序</view>
            <view class="icon"></view>
        </view>
        <view class="nav-item">
            <view class="content">时间</view>
            <vew class="icon"></vew>
        </view>
        <view class="nav-item">
            <view class="content">价格</view>
            <vew class="icon"></vew>
        </view>
    </view>
    <!--下拉内容-->
    <view class="list {{openif ? 'down' : 'up'}} ">
        <view wx:for="{{content}}">
            {{item}}
        </view>
    </view>
</view>

josn文件

{
  "usingComponents": {}
}

wxss文件

.page{
    overflow: hidden;  /*页面溢出隐藏*/
}
.nav{
    position: relative;
    z-index: 1;  /*页面元素谁覆盖在谁的上面*/
    display: flex;
    flex-direction: row;
    background: white;
}
.nav-item{
    display: flex;
    flex: 1;  /*几个内容等分屏幕*/
    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;  /*刚开始尚未显示，所以显示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{  /*注意有空格*/
    color: skyblue;
}
.nav-item.active .icon{
    border-bottom: 10rpx solid skyblue;
    border-top: 0;
}
.down{
    display: block;
    animation: slidown 0.001s ease-in both;  /*添加动画*/
}
@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%);
    }
}

标签：flex,场景,translateY,solid,微信,display,nav,border,下拉菜单
来源： https://blog.csdn.net/qq_45911550/article/details/120436768

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。