微信小程序实现列表项展开折叠功能
时间: 2024-10-09 09:09:50 浏览: 12
微信小程序实现列表项展开折叠功能通常通过`wx:if`或`v-for`结合条件判断来实现。你可以创建一个列表组件,每个列表项都有一个初始隐藏的详细内容部分。当用户点击某个列表项时,会触发一个事件,比如`tap`,然后改变这个细节部分的显示状态。
以下是一个简单的示例:
```html
<view class="list-item">
<view class="item-title" bindtap="toggleDetails">标题</view>
<view wx:if="{{isExpanded}}" class="item-details">详细内容...</view>
</view>
<script>
Page({
data: {
isExpanded: false, // 初始时细节部分折叠
items: [
{ title: '第一条', details: '详细描述一' },
{ title: '第二条', details: '详细描述二' },
//...
]
},
toggleDetails: function(item) {
this.setData({
isExpanded: !this.data.isExpanded,
currentItem: item // 如果你想记住当前选中的项,可以这么做
});
}
})
</script>
<style scoped>
.list-item {
/* 样式 */
}
.item-title {
/* 标题样式 */
}
.item-details {
display: none; /* 初始隐藏 */
}
</style>
```
在这个例子中,当你点击`item-title`,`toggleDetails`函数会被调用,`isExpanded`的状态会被反转,相应地`item-details`的内容就会被显示或隐藏。每个列表项都需要有自己的`bindtap`事件处理函数,传入当前点击的项目数据。