小程序对于内容展开收起

html

   
     备注:{{item.remark}}
        
            
           
        
     
  
  
    
      {{item.handelName}}
    
  
    

js

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


 for(let item of list){
    item.content = item.content.replace(/\n/g, "
")
    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%;
}

效果