需要实现的功能效果如下
axml文件代码
<view class="help-item" a:for="{{helpList}}" key="{{index}}">
<view class="help-title" onTap="clickHandle" data-index='{{index}}'>
<view class="title-text">{{item.helpTitle}}</view>
<view class="title-arrow">
<text class="iconfont {{showIndex == index ? 'icon-down':'icon-right'}}"></text>
</view>
</view>
<view class="help-content" a:if="{{showIndex == index}}">
{{item.helpContent}}
</view>
</view>
js文件内容
Page({
data: {
helpList:[
{
helpTitle:"item-title1",
helpContent:"item-content1"
},
{
helpTitle:"item-title2",
helpContent:"item-content2"
},
{
helpTitle:"item-title3",
helpContent:"item-content3"
}
],
showIndex:"-1"
},
clickHandle(e){
console.log(e.currentTarget.dataset.index);
if (e.currentTarget.dataset.index != this.data.showIndex) {
this.setData({
showIndex: e.currentTarget.dataset.index
})
} else {
this.setData({
showIndex: "-1"
})
}
}
});