微信小程序下拉列表菜单

效果图：

 

1.wxml

 

2.wxss

.list-msg { 

padding: 0 10rpx;

background-color: #fff;

position: relative;

width: 90%;

margin: 30rpx auto;

}

 

.list-msg .list-msg2 {

height: 70rpx;

display: flex;

align-items: center;

justify-content: space-around;

border: 1px solid #f89219;

padding: 0 20rpx;

color: #f89219;

border-radius: 10rpx;

}

 

.select_box {

padding: 0;

width: 97%;

position: absolute;

top: 90rpx;

z-index: 1;

overflow: hidden;

animation: myfirst 0.5s;

text-align: center;

border: 1px solid #f89219;

color: #f89219;

border-radius: 10rpx;

}

 

@keyframes myfirst {

from {

height: 0rpx;

}

 

to {

height: 300rpx;

}

}

 

.select_one {

height: 70rpx;

line-height: 70rpx;

border-bottom: 1px solid #f89219;

background: #fff;

}

 

.select_one:last-child {

border-bottom: none;

}

 

3.js

data: {

select: false,

tihuoWay: '五年级上册第一关班级内详情',

}

bindShowMsg() {

this.setData({

select: !this.data.select

})

},

mySelect(e) {

var name = e.currentTarget.dataset.name

this.setData({

tihuoWay: name,

select: false

})

},