美文网首页
uni-app 点击显示隐藏

uni-app 点击显示隐藏

作者: 配角_2763 | 来源:发表于2020-11-11 10:29 被阅读0次

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>

相关文章