关于微信小程序的折叠效果

需求

做一个折叠效果，类似简书的“支付 ￥2.99 继续阅读”，或者朋友圈的“全文”，或者手机的QQ好友列表

效果图

源码

传送门

开始

先来一个简单的：折叠

简单的例子

先看一段代码

  <view class="{{flag?'is-none':''}}">
    这里可以放想要被折叠的文字，等。
  </view>

我们可以通过控制flag的真假值，来给这个view添加'is-none'，或者' '，也就是什么也没有。
然后is-none:

.is-none{
  display: none
}

也就是说，通过控制flag的值，来控制css。
所以这时候我们还需要一个监听器，触发修改flag的事件，就ok了。可以看看源码。

然后：折叠列表

折叠列表

如果想要显示的数据是列表形式比如

list: [{
      title: '这第一个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}, {
      title: '这第二个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}, {
      title: '这第三个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}]

• 用上面的方法好像也可以，但多数情况下list的长度都是不确定的，所以需要一个wx:for

<view wx:for="{{list}}">
  <!-- 这是一个注释 -->
</view>

• 还有一个问题是点击标题的时候要设置flag值，如果只有一个flag，那点某一个标题，所有的都被展开了。所以，list中每一个对象都要有自己的flag

list: [{
      flag: true,
      title: '这第一个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}, {
      flag: true,
      title: '这第二个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}, {
      flag: true,
      title: '这第三个标题',
      content: '这是第一个标题对应的content，这里要多写点字，才能显示出效果，感觉写这么多，就差不多了'
}]

• 所以list中每个对象都有一个监听器？没毛病，但是有更好的办法，只保留一个监听器。触发事件的时候，给监听器方法传一个参数，告诉它，点的是第几个标题，这里可以用dataset（如果之前没用过dataset，先别去百度）

源码在这里

类似好友列表

的源码

复用

目标

封装成一个自定义组件，当要用的时候，只需要提供list就ok了，也就是只用一行代码完成上面的内容：

<elv list="{{list}}"/>

解决

源码

注意点：自定义组件用到的样式要事先声明

一个想法

事实上，一个应用里，好友列表这种组件可能只出现一次，那封装不封装好像也没什么意义。
那么，可不可以这样，只封装“折叠”和“列表”，用到折叠列表的时候，提供三个东西：

1. 数据
2. title的view
3. content的view

比如一个好友列表，封装好“折叠”和“列表”之后，提供三个东西：1，好友数据；2，分组的view；3，组内好友的view。
这才是真正的复用。
思路：多slot

最后

感谢读完，如果有写得不清楚的地方或者其他需求，可以留言给码者。