小程序?qū)崿F(xiàn)下拉列表框菜單

更新時(shí)間：2022年07月18日 14:48:26 作者：掘金-我是哪吒

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)下拉列表框菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)下拉列表框菜單的具體代碼，供大家參考，具體內(nèi)容如下

<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;
}

/* 下拉內(nèi)容 */

.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;
? }
}

/* 下拉圖標(biāo) */

.top-selected image {
? height: 50rpx;
? width: 50rpx;
? position: absolute;
? right: 0rpx;
? top: 20rpx;
}

// pages/zy/zy.js
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? select: false,
? ? grade_name: '--請(qǐng)選擇--',
? ? 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
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? ?*/
? onLoad: function(options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
? ?*/
? onShow: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
? ?*/
? onHide: function() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
? ?*/
? onUnload: function() {

? },

? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function() {

? },

? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function() {

? },

? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function() {

? }
})