小程序实现下拉列表框菜单

本文实例为大家分享了小程序实现下拉列表框菜单的具体代码，供大家参考，具体内容如下

<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.js
Page({
? /**
? ?* 页面的初始数据
? ?*/
? 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() {

? }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于小程序实现下拉列表框菜单的详细内容...