下拉伸展，收缩

html

  <!-- 接受任务之后的隐患上报 -->
  <block wx:if="{{chooseAddress}}">
    <view class="yhList">
      <!-- bigwarp -->
      <view class="dewarp">
        <view class='com-selectBox' wx:for="{{detil}}" wx:for-item="items" wx:key="index">
          <view class='com-sContent' bindtap='showList' data-id='{{items.id}}'>
            <view class="com-index">{{index+1}}</view>
            <view class='com-sTxt'>{{items.title}}</view>
            <view class="caricon">
              <!-- //删除 -->
              <view class="deleteImg" catchtap="deleYH" data-id="{{items.id}}">删除</view>
            </view>
          </view>
          <!-- 根据{{item.isShow?'show':'hide'}} 判断显示和隐藏 -->
          <view class=" {{items.isShow?'show':'hide'}}">
            <view class="com-order-list">
              <!-- 描述 -->
              <view class="com-order2">
                <view class="com-oleft">隐患描述：</view>
                <view class="com-text-box">
                  <textarea disabled='true' type="text" style="line-height:50rpx;"
                    class="com-textArea">{{items.description}}</textarea>
                </view>
              </view>
              <!-- img展示 -->
              <view class="com-order2" style="display:flex;position:relative">
                <view> 隐患图片：</view>

                <view class="wrapper-img">
                  <view class="imageList-warp" wx:if="{{items.imageList.length>0}}">
                    <view class="imageList" wx:for-item="image" wx:for="{{items.imgs}}" wx:key='index'>
                      <image src="{{image}}" mode="aspectFill" style="border-radius: 12rpx;" data-src="{{image}}"
                        bindtap="previewImage"></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- end -->

    </view>
    <view bindtap="addYH" class="yhsb-btn">增加隐患</view>
  </block>

css

.yhsb-btn {
  width: 686rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 32rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  text-align: center;
  color: #ffffff;
  background: #ff4535;
  border-radius: 44rpx;
  margin: 40rpx auto 76rpx;
}

/* 下拉展开 */
/* bigwarp */
.rotateRight {
  transform: rotate(180deg)
}

.com-selectBox {
  width: 702rpx;
  margin: 0 auto;
}

.com-sContent {
  background: white;
  font-size: 16px;
  line-height: 30px;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(85, 85, 85, 0.13);
  border-radius: 20rpx;
  height: 100rpx;
  margin-top: 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx 0 48rpx;
}
.com-sTxt{
  width: 420rpx;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}
.com-sImg {
  width: 56rpx;
  height: 56rpx;
}
.deleteImg{
  font-size: 28rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: right;
    color: #ff4535;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.select_img_rotate {
  transform: rotate(180deg);
}

.com-order-list {
  width: 100%;
  margin: 8rpx auto;
  text-align: center;
  box-sizing: border-box;
}

.com-order2 {
  border-radius: 14rpx;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #848689;
  padding: 32rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 8rpx;
}

.com-oleft {
  width: 160rpx;
  margin-bottom: 32rpx;
}

.com-text-box {
  box-sizing: border-box;
  font-size: 36rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #25282E;
}

.com-index {
  width: 56rpx;
  height: 56rpx;
  background: #4b8cff;
  border-radius: 50%;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
}

.com-textArea {
  text-align: left;
  width: 100%;
}

.fright {
  position: relative;
  padding-right: 32rpx;
}

.textArea1 {
  box-sizing: border-box;
  flex: 1;
  width: calc(100vw - 303rpx);
  text-align: left;
  color: #25282e;
  font-size: 36rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
}


.moreto {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  top: 4rpx;
  right: -3px;
}

.wrapper-img {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: calc(100vw - 265rpx);
  margin-bottom: 64rpx;
}

.imageList-warp {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  align-items: center;
}

.imageList {
  width: 112rpx;
  height: 112rpx;
  position: relative;
  margin: 32rpx;
  margin-left: 0;
}

.addImg {
  width: 112rpx;
  height: 112rpx;
  border-radius: 12rpx;
}

image {
  width: 100%;
  height: 100%;
}

/* end */

js

 // 下拉展开
  showList(e) {
    let index = 0;
    let arrayItem = this.data.detil; //获取循环数组对象
    for (let item of arrayItem) {
      // console.log(item.id, e.currentTarget.dataset.id)
      //如果当前点击的对象id和循环对象里的id一致
      if (item.id == e.currentTarget.dataset.id) {
        //判断当前对象中的isShow是否为true（true为显示，其他为隐藏） 
        if (arrayItem[index].isShow == "" || arrayItem[index].isShow == undefined) {
          arrayItem[index].isShow = "true"
        } else {
          arrayItem[index].isShow = ""
        }
      }
      index++;
    }
    //将数据动态绑定 
    this.setData({
      detil: arrayItem
    })
  },
  // 下拉展开end

下拉样式

收缩样式

如果不需要删除功能， 删除按钮那里可以更改为图片，展示上拉收缩的样式更明显。