标题图
小程序下拉列表框菜单
<view class='top'>
<view class='top-text'> 选择班别</view>
<!-- 下拉框 -->
<view class='top-selected' bindtap='bindShowMsg'>
<text>{{grade_name}}</text>
<image src='/images/xia.png'></image>
</view>
<!-- 下拉需要显示的列表 -->
<view class="select_box" wx:if="{{select}}">
<view wx:for="{{grades}}" wx:key="unique">
<view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}</view>
</view>
</view></view>/* 顶部 */.top { width: 100vw; height: 80rpx; padding: 0 20rpx; line-height: 80rpx; font-size: 34rpx; border-bottom: 1px solid #000;
}.top-text { float: left;
}/* 下拉框 */.top-selected { width: 50%; display: flex; float: right; align-items: center; justify-content: space-between; border: 1px solid #ccc; padding: 0 10rpx; font-size: 30rpx;
}/* 下拉内容 */.select_box { background-color: #fff; padding: 0 20rpx; width: 50%; float: right; position: relative; right: 0; z-index: 1; overflow: hidden; text-align: left; animation: myfirst 0.5s; font-size: 30rpx;
}.select_one { padding-left: 20rpx; width: 100%; height: 60rpx; position: relative; line-height: 60rpx; border-bottom: 1px solid #ccc;
}/* 下拉过度效果 */@keyframes myfirst { from { height: 0rpx;
} to { height: 210rpx;
}
}/* 下拉图标 */.top-selected image { height: 50rpx; width: 50rpx; position: absolute; right: 0rpx; top: 20rpx;
}// pages/zy/zy.jsPage({ /**
* 页面的初始数据
*/
data: { select: false, grade_name: '--请选择--', grades: ['1班', '2班', '3班', ]
},
bindShowMsg() { this.setData({ select: !this.data.select
})
},
mySelect(e) { console.log(e) var name = e.currentTarget.dataset.name this.setData({ grade_name: name, select: false
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
}, /**
* 生命周期函数--监听页面显示
*/
onShow: function() {
}, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
}, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
}, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
}, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})效果
作者：达叔小生
链接：https://www.jianshu.com/p/e75632377505