小程序中wxfor的每一个单独按钮点击显示
可以在wx:for的每个按钮上绑定一个点击事件,然后在事件处理函数中设置相应的显示效果。例如:
<view wx:for="{{list}}" wx:key="index">
<button bindtap="showDetail">{{item.title}}</button>
<view wx:if="{{item.showDetail}}">详细内容:{{item.content}}</view>
</view>
在上面的代码中,每个按钮绑定了一个名为showDetail的点击事件。在事件处理函数中,可以根据当前按钮所在的索引index来确定要显示详细内容的数据项,然后将该数据项中的showDetail属性设置为true即可:
Page({
data: {
list: [
{title: '按钮1', content: '详细内容1', showDetail: false},
{title: '按钮2', content: '详细内容2', showDetail: false},
{title: '按钮3', content: '详细内容3', showDetail: false},
]
},
showDetail: function(e) {
var index = e.currentTarget.dataset.index;
var list = this.data.list;
list[index].showDetail = !list[index].showDetail;
this.setData({list: list});
}
})
在showDetail函数中,先通过e.currentTarget.dataset.index获取当前按钮所在的索引index,然后通过this.data.list[index]获取该数据项,再将其showDetail属性取反,并通过this.setData更新数据。这样,每次点击按钮时,就可以动态地显示或隐藏相应的详细内容了。
原文地址: https://www.cveoy.top/t/topic/bf5W 著作权归作者所有。请勿转载和采集!