列表中每一项实现展开收起功能

提示：前端动态列表中每一项的展开收起功能

---

前言

提示：列表中每一项都有展开收起：

从后端获取数据，渲染列表，使每一项都有展开收起功能。

---

一、效果图展示

二、详细说明

1.需求分析

我的需求是：只有文字超出三行的时候，才显示展开收起字段；小于三行则不展示；

2.代码分析

代码如下（示例）：

<view class="imgBox">
     <view  :class="item.openShow ? 'nameTag2' : 'nameTag3'">{{ item.content }} </view>
     <view v-if="item.openShow && !item.firstLineCount" @click.stop="clickOpen(item)" class="openShow">展开</view>
     <view v-if="!item.openShow && !item.firstLineCount" @click.stop="clickOpen(item)" class="openShow">收起</view>
</view>

........
data() {
    return {
      // 判断展开收起字段
      openShow: false,
    }
  },

methods: {
// 获取动态列表
    getDynamicsList(lastKeyWord) {
      let that = this
      let data = {
        findType: 'SELF',
        pageSize: 10,
        targetNumberId: that.otherUserId,
      }
      requestMethod('/user/v1/list', data).then((res) => {
        if (res.code == 'SUCCESS') {
          //此处做了分页加载数据
          that.dynamicList = [...that.dynamicList, ...res.data.list]
          
          //因为后端接口中每一项没有返回控制展开收起的字段，前端自己遍历添加一个控制字段openShow，
          //已经在data中定义过了
          that.dynamicList.forEach((item, index) => {
            //item.openShow控制展开收起字段的交互；
            item.openShow = item.content.length > 78 ? true : false
            //item.firstLineCount控制是否超出三行，按照一行26个字来控制长度，可能不准确，
            //但想不到如何获取每一项的文字有几行,暂时按照文字长度来判断；
            item.firstLineCount = item.content.length <= 78 ? true : false
            //这个item.id因为接口里面没有返回每一项的id之类的字段，所以为了下面的点击展开收起时，
            //要触发更新文字的变化，所以加了一个id；若是接口里面有类似于id等字段，可以不加
            item.id = index
          })
        }
      })
    },
    
   //要触发更新，不然不会立刻改变展开收起文字的变化
   clickOpen(item) {
      let that = this
      // 触发vue2中的更新
      let arr = [...that.dynamicList]
      arr.forEach((item2, index) => {
        if (item2.id == item.id) {
          item2.openShow = !item2.openShow
        }
      })
      that.dynamicList = arr
    },
}

.imgBox .nameTag2 {
  font-size: 24rpx;
  font-family: OPPOSans, OPPOSans-Medium;
  font-weight: 500;
  color: #333333;
  line-height: 32rpx;
  margin-left: 10rpx;
  
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.imgBox .nameTag3 {
  font-size: 24rpx;
  font-family: OPPOSans, OPPOSans-Medium;
  font-weight: 500;
  color: #333333;
  line-height: 32rpx;
  margin-left: 10rpx;
  word-break: break-all;
}
.openShow {
  font-size: 24rpx;
  font-family: OPPOSans, OPPOSans-Medium;
  font-weight: 500;
  text-align: left;
  color: #ff466d;
  line-height: 32rpx;
  margin-left: 10rpx;
}

以上是所有代码文字。

---

总结

做列表每一项的展开收起功能，一般后端都不会返回相应的字段，所以基本上都是前端自己定义一个控制变量的字段，因此点击展开收起文字时要触发vue2的更新，否则会触发效果，但是展开收起文字不会发生变化。