【微信小程序】点击展开显示更多,点击收起部分隐藏以及修改Data对象中的某一元素

最新推荐文章于 2023-06-13 16:20:25 发布

夏同学vane

最新推荐文章于 2023-06-13 16:20:25 发布

阅读量4.3k

点赞数 2

分类专栏：记录文章文章标签：小程序前端 js

本文链接：https://blog.csdn.net/You_vane/article/details/118031826

版权

本文介绍了在微信小程序中实现点击展开显示更多内容、点击收起隐藏部分内容的问题。作者遇到的问题是多个消息共用一个布尔值导致点击展开时所有消息都会受到影响。为了解决这个问题，作者采用了为每个消息分配唯一标识和布尔值的方法，并通过`wx:for`循环和条件类名控制显示状态。在JS中，使用点击事件结合`setData`动态修改数据对象中特定元素的状态，实现了预期效果。

摘要由CSDN通过智能技术生成

效果图如下：

刚开始的时候再VantUI库里找了大半天没找到，看来不能偷懒了，只能自己做了。

先说下我的理解哈：

1展示部分和点击全部展示主要是通过控制添加css类来实现的，因此在下面查看wxss中，重点看'messageContent' 'text_hidden','text_show' 这三个类即可。

  /* 给父元素加 */
  .messageContent{
    overflow: hidden;
    display: -webkit-box;
    color: #666;
    -webkit-box-orient:vertical;
  }
  /* 将文字只显示一行 */
  .text_hidden{
    -webkit-line-clamp:1; 
  }
  /* 将文字全部展示 */
  .text_show{
   -webkit-line-clamp:0; 
  }

然后呢，现在就要有个思路，当我要让他全部展示的时候，就给他动态的添加（三目）text_show类，让他只显示一行的时候就给他加text_hidden类。然后就开始实现他。

错误思路（碎碎念）：刚开始我想这是在js的data中定义一个布尔值，通过点击事件，然后修改这个布尔值，从而实现动态的改变这两个类，一开始没啥问题，效果还不错，因为我做的是消息页面，消息不可能是只有一个消息对吧？然后有copy了俩，然后一使用，欸，问题来了，当我让一个消息展开全部内容时，其他的消息也会随之展开。

原因也很简单，因为这里的消息内容公用的一个布尔值，当我点击修改这个值的时候，他一改变，其他的肯定也会跟着改变。

解决方法：若我多设置几个布尔值一个判断一个他不行吗？他可以的，但是，消息他的个数不是固定的，这里设计稿给出的是四个，若我这里写四个后又有新的消息了就报