需求
做一个折叠效果，类似简书的“支付 ￥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}}"/>
解决
注意点：自定义组件用到的样式要事先声明
一个想法
事实上，一个应用里，好友列表这种组件可能只出现一次，那封装不封装好像也没什么意义。
那么，可不可以这样，只封装“折叠”和“列表”，用到折叠列表的时候，提供三个东西：
- 数据
- title的view
- content的view
比如一个好友列表，封装好“折叠”和“列表”之后，提供三个东西：1，好友数据；2，分组的view；3，组内好友的view。
这才是真正的复用。
思路：多slot
最后
感谢读完，如果有写得不清楚的地方或者其他需求，可以留言给码者。
