微信小程序订单列表加一个“更多”来显示/隐藏按钮

1.效果图，点击订单列表的"更多"，会显示出隐藏的按钮，再次点击"更多"就隐藏

2.wxml

这里是用订单id来判断的

 <view class='order-list' wx:for="{{userOrderList}}" wx:key="index">
      <view class='item' wx:for="{{item.list}}" wx:for-item="vo" wx:key="index" data-item="{{vo}}">
           <view class='btn'  >
              <view class='more'>
                <view class='more-text' data-id="{{vo._id}}" bindtap='bindShowMsg' > 更多</view>
                <!-- 下拉需要显示的列表 -->
                <view class="select_box "  wx:if="{{selectid==vo._id}}">
                  <view wx:for="{{moreText}}" wx:key="unique">
                    <view class="select_one" bindtap="mySelect" data-id="{{vo._id}}" data-status="{{vo.status}}" data-isEvaluate="{{vo.isEvaluate}}" data-name="{{item.name}}">{{item.name}}</view>
                  </view>
                </view>
              </view>

             <view class="btns">
              <view class="nextBtn" data-id="{{vo._id}}" bindtap="wxpay">去支付</view>
                <view class="nextBtn" data-id="{{vo._id}}" data-types="{{vo.type}}" bindtap="confirmMoney"  data-target="DialogModal1">确认金额</view>
       
            </view>
            </view>
   </view>
        </view>

 3.js

data:{
 userOrderList: [],
    money: 0, //订单金额
    moreText: [{
      id: 0,
      name: '修改订单'
    }, {
      id: 1,
      name: '取消订单'
    }, {
      id: 2,
      name: '服务评价'
    }, {
      id: 3,
      name: '开发票'
    }],
    orderid: '',
    selectid: 0
},
  /**
   * 点击下拉框
   */
  bindShowMsg(e) {
    let that=this
    let id = e.currentTarget.dataset.id;
    console.log('id', id)
   
    if(this.data.selectid==0){ //判断是否已经点击更多
      that.setData({  //显示更多
        selectid: id
      })
    }else{
      that.setData({ //隐藏更多
        selectid: 0
      })
    }
  },
 /**
   * 已选下拉框
   */
  mySelect(e) {
    let that = this
    let name = e.currentTarget.dataset.name
    let id = e.currentTarget.dataset.id;
    let status = e.currentTarget.dataset.status
    let isEvaluate = e.currentTarget.dataset.isEvaluate
    console.log('id', id)
    console.log('name', name)
    console.log('status', status)
    console.log('isEvaluate', isEvaluate)
    if (name == '修改订单') {
      that.modifyDetails(id)
      that.setData({
        selectid: 0
      })
    } else if (name == '取消订单' && status == 0) {
      that.cancelOrder(id)
      that.setData({
        selectid: 0
      })
    } else if (name == '服务评价') {
      if (status == 2 && isEvaluate == 0) {
        that.evaluation(id)
        that.setData({
          selectid: 0
        })
      } else {
        return wx.showModal({
          title: '温馨提示',
          content: '当前功能暂未开放',
          showCancel: false,
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.setData({
                selectid: 0
              })
            }
          }
        })
      }
    } else if (name == '开发票') {
      if (status == 2) {
        that.makeInvoice(id)
        that.setData({
          selectid: 0
        })
      } else {
        return wx.showModal({
          title: '温馨提示',
          content: '当前功能暂未开放',
          showCancel: false,
          success(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.setData({
                selectid: 0
              })
            }
          }
        })
      }
    }
  },

4.wxss

按钮部分的样式

.order-list .item .btn {
  width: 100%;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2rpx dashed #ededed;
}

.order-list .item .btn .nextBtn {
  display: flex;
  padding: 10rpx 20rpx;
  align-items: center;
  justify-content: center;
  background: #0081ff;
  color: #fff;
  border-radius: 32rpx;
  margin: 0 10rpx;
}
.order-list .item .btn .btns{
 display: flex;
 flex-direction: row;
 flex: 1;
 justify-content: flex-end;
   }
/* 下拉菜单 */
 
/* 顶部 */
.order-list .item .btn .more{
position: relative;
 }
 .order-list .item .btn .more-text{
   color: #999999;
   width: 100rpx;
   text-align: center;
 }

 /* 下拉内容 */
 .order-list .item .btn .select_box {
   background-color: #fff;
   padding: 0 20rpx;
   width: 220rpx;
   z-index: 9;
   overflow: hidden;
   text-align: left;
   animation: myfirst 0.5s;
   font-size: 30rpx;
   position: absolute;
   top: 57rpx;
   left: 0;
   border: 2rpx solid #ededed;
   border-radius: 10rpx;
 }
 .order-list .item .btn .select_one {
   width: 100%;
   height: 60rpx;
   position: relative;
   line-height: 60rpx;
   border-bottom: 2rpx solid #ededed;
   color: #666;
   text-align: center;
 }
 /* 下拉过度效果 */
 @keyframes myfirst {
   from {
     height: 0rpx;
   }
  
   to {
     height: 210rpx;
    
   }
 }