这里代码是用的uni-app的,都一样!
<view class="leaderboard_cont_list" v-for="(item, index) in list" :key="index"
@click="clickListShow(item,index)">
<view class="leaderboard_cont_list_for">
<view class="leaderboard_cont_list_left">
{{item.name}}: {{item.detail?item.detail:'无'}}
</view>
<view class="leaderboard_cont_list_right" v-if="item.active">
<u-icon name="arrow-down" size="20" color="#333"></u-icon>
</view>
<view class="leaderboard_cont_list_right" v-else>
<u-icon name="arrow-right" size="20" color="#333"></u-icon>
</view>
</view>
<view class="leaderboard_cont_list_data" v-if="item.active">
<view class="title">
<view class="title_1"></view>
<view class="title_2">用户</view>
<view class="title_2">持仓数</view>
<view class="title_2">交易金额</view>
</view>
<view class="title" v-for="(item1, index1) in listData" :key="item1.rank">
<view class="title_1">{{item1.rank}}.</view>
<view class="title_2">{{item1.nickname}}</view>
<view class="title_2">{{item1.card_total}}</view>
<view class="title_2">{{item1.trade_total}}</view>
</view>
</view>
</view>
data() {
return {
list: [],
listData: []
}
},
初始化数据给每条数据添加一个是否显示的active属性用于判断是否展开
this.list.forEach(item => {
this.$set(item, 'active', false)
})
// 点击展开查看详情
clickListShow(item, index) {
this.listData = []
let active = item.active //先把点击的值存起来
this.list.forEach(item => { //把所有的active变为false
this.$set(item, 'active', false)
})
item.active = !active //把active变成不等于存起来的那个值
this.$set(item, 'active', item.active)
//this.$http.get().then(res => {
//this.listData = res.data.rank
//})
}