小程序下拉列表框菜单

浅浅的花香味﹌ 2021-09-17 07:50 426阅读 0赞

小程序下拉列表框菜单

<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() {
    
      }
    })

![效果][20181210142619472.png]

[20181210142619472.png]: /images/20210724/1e5e0a2858cd4588914a1eda0aad4222.png