小程序对于内容展开收起

html

<view class='a-i-content a-i-content{{item.isclick}}'>
   <rich-text nodes="{{item.content}}"></rich-text>
     <view class='remark' wx:if="{{item.remark}}">备注:{{item.remark}}</view>
        <view class='images' wx:if="{{item.images.length > 0}}">
            <view class='i-img' wx:for='{{item.images}}' wx:for-item='element' wx:key='index' bindtap='clickImg' data-src="{{imgurl}}{{element}}" data-id='{{item.id}}'>
           <image class='img' src='{{imgurl}}{{element}}'></image>
        </view>
     </view>
  </view>
  <view  class='zhannkai {{item.zk}}' wx:if='{{item.images.length > 0}}' bindtap='handelClick' data-id='{{item.id}}'>
    <view class='i-z'>
      {{item.handelName}}
    <view class='iconfont icon-xiala2 isclick{{item.isclick}}'></view>
  </view>
</view>    

js

data{
  isclick:false,
  queryInfo:[]
} 
/*    
    queryInfo是后台传回来的，处理了一下，给每项加个状态


 for(let item of list){
    item.content = item.content.replace(/\n/g, "<br/>")
    item.handelName = '展开'
    item.isclick = that.data.isclick
 }
*/

handelClick(e){
    let list = this.data.queryInfo
    
    for(let item of list){
      if(item.id == e.currentTarget.dataset.id){
        if (this.data.isclick) {
          item.handelName = "展开"
          item.isclick = !this.data.isclick
          this.setData({
            isclick: !this.data.isclick
          })
          break
        }else{
          item.handelName = "收起"
          item.isclick = !this.data.isclick
          this.setData({
            isclick: !this.data.isclick
          })
          break
        }
      }
    }
    this.setData({
      queryInfo:list,
    })

  },

css

.isclickfalse{
  transform: rotate(0deg);
}
.isclicktrue{
  transform: rotate(180deg);
}

.a-i-contentfalse{
  max-height: 200rpx;
}

.a-i-contenttrue{
  max-height: 100%;
}

效果