小程序实现下拉列表框菜单_javascript技巧_

    选择班别          {{grade_name}}                         {{item}}        

/* 顶部 */ .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() {   } })