小程序下拉显示详情与勾选选项的教程

小程序下拉显示详情的教程

下拉显示详情可以在加个下拉的图标绑定下拉事件
使用isShow控制详情的显示

勾选的选项用于具体的操作
直接加个勾选的图标，绑定勾选事件。使用ischeck作为判断勾选的字段

wxml

<block wx:for="{{containerList}}" wx:for-item="item">
          <view class="containerList">
            <view class="containerListHeader">
              <view style="display: flex;" bindtap='selectContainer' data-id='{{item.containerCode}}'>
                <view style="width:34rpx;height:34rpx;margin-right: 20rpx;">
                  <image class="selectIcon" src='../resources/img/select.png' wx:if="{{item.isCheck}}"></image>
                  <image class="selectIcon" src='../resources/img/unSelect.png' wx:else></image>
                </view>
                <text class="containerName "> {{item.containerCode}}</text>
              </view>
              <view>
                <image bindtap='showContainerList' data-id='{{item.containerCode}}' src="../resources/img/pullDown.png" class='pullIcon' wx:if="{{!item.isShow}}"></image>
                <image bindtap='showContainerList' data-id='{{item.containerCode}}' src="../resources/img/pullUp.png" class='pullIcon' wx:else></image>
              </view>
            </view>
            <view class=" {{item.isShow?'show':'hide'}}">
              <view class="item ">
                <view class="name ">箱型</view>
                <view class="value "> {{item.containerSize}}</view>
              </view>
            </view>
          </view>
        </block>

js文件
//显示下拉详情

  showContainerList(e) {
    let index = 0;
    let containerList = this.data.containerList; //获取循环数组对象
    for (let item of containerList) {
      //如果当前点击的对象id和循环对象里的id一致
      if (item.containerCode == e.currentTarget.dataset.id) {
        //判断当前对象中的isShow是否为true（true为显示，其他为隐藏） 
        if (containerList[index].isShow == "" || containerList[index].isShow == undefined) {
          containerList[index].isShow = true
        } else {
          containerList[index].isShow = ""
        }
      }
      index++;
    }
    //将数据动态绑定 
    this.setData({
      containerList: containerList
    })
  },
 //勾选集装箱
  selectContainer(e) {
    let index = 0;
    let containerList = this.data.containerList; //获取循环数组对象
    for (let item of containerList) {
      //如果当前点击的对象id和循环对象里的id一致
      if (item.containerCode == e.currentTarget.dataset.id) {
        containerList[index].isCheck = containerList[index].isCheck == undefined ? true : !containerList[index].isCheck
      }
      index++;
    }
    //将数据动态绑定 
    this.setData({
      containerList: containerList
    })
  },

注 ：具体代码根据自己逻辑更改