如何在小程序中实现列表的展开与收起功能？

本文共计714个文字，预计阅读时间需要3分钟。

本文将分享一个小程序实现列表展开收起的示例代码。供大家参考。

效果：+ 原理：利用AppData的值来控制显示隐藏样式，进行展开收起。

代码： {{item.name}}

javascript// jsPage({ data: { list: [ { name: '列表项1', show: true, index: 0 }, { name: '列表项2', show: false, index: 1 }, { name: '列表项3', show: false, index: 2 } ] }, toChange: function(e) { const index=e.currentTarget.dataset.sho; const list=this.data.list.map((item, i)=> { if (i===index) { return { ...item, show: !item.show }; } else { return item; } }); this.setData({ list }); }});

css/* wxss */.show { display: block;}.hide { display: none;}

以上代码实现了点击列表项，根据当前项的显示状态进行展开收起的效果。通过修改AppData中的值来控制样式的显示与隐藏。

本文实例为大家分享了小程序实现列表展开收起的具体代码，供大家参考，具体内容如下

效果：

原理：利用AppData值 + 显示隐藏的样式，进行展开收起。