uniapp 点击显示当前内容,其他内容隐藏。
效果如下:
直接贴代码<template>
<view class="content">
<view class="helplist" @tap="toggle(index)" v-for="(item, index) in dataList" :key="index">
<view class="helptitle"><text class="question" :class="[index%2=='1'?'yellow':'blue']">?</text>{{item.title}}
<text class="fa down" :class="[current==index?'fa-caret-up':'fa-caret-down']"></text></view>
<view class="helpcont" v-show="current == index"><rich-text :nodes="item.content" style="font-size: 14px;"></rich-text></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
index : 0,
current : 0,
dataList: []
}
},
methods: {
toggle(index) {
console.log(index)
this.current = index;
},
onLoad(e) {
this.getData();
},
getData(e) {
uni.request({
url: this.$serverUrl + '/index/article/articleList?category_id=3',
success: (ret) => {
if (ret.data.code !== 200) {
console.log('请求失败', ret)
return;
}
this.dataList = ret.data.info;
console.log(this.dataList)
},
});
}
}
}
</script>
网友评论