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

「爱情、让人受尽委屈。」 2023-01-01 03:46 144阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

2.wxml

这里是用订单id来判断的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221120/092a6c5bf4404bfaa6dda2c0cebf78ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201231100552581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70