vue 实现手风琴折叠面板

这里代码是用的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}}:&nbsp;&nbsp;{{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变为falsethis.$set(item, 'active', false)})item.active = !active  //把active变成不等于存起来的那个值this.$set(item, 'active', item.active)//this.$http.get().then(res => {//this.listData = res.data.rank//})
}

vue 实现手风琴折叠面板相关推荐

VUE手动实现手风琴折叠面板，不用组件
Table of Contents 1.在需要点击触发事件的位置加上click事件 2.在点击区域内合适的地方加上图标 3.实现foldSwitch方法 4.实现changeStyle方法 VUE+e ...
km之路--010 jquery 002 开发一个手风琴/折叠面板插件
目标描述我想要的插件是类似jquery-ui的accordion插件我想要的功能是这样的: 1. 此插件是否响应式应该是可选的,也就是宽度和高度是否自动自动填充父容器div 2. 可以自定义左边的 ...
面板——卡片面板、常规折叠面板、手风琴折叠
1. 卡片面板 2. 普通折叠面板 3. 手风琴面板在普通面板上加 lay-accordion="" <%@ page language="java" ...
vue实现侧边折叠菜单栏手风琴效果
在我们做管理后台亦或是产品流程时,总是需要一个菜单栏或者导航栏来架起我们的产品架构,那么,如何用vue实现侧边折叠导航栏呢?接下来将一一介绍. 请先看效果演示图. 步骤1:先架构整个页面的布局,撰写h ...
vue animation css实现左右折叠面板
<div class="left" :class="boxshow ? 'a1': 'a2'" id="showBox">这里是 ...
微信小程序折叠面板（类似手风琴收起展开一样的噢）
效果图 wxml <view class="problem2"><view class="problem2 ...
vue折叠面板如何默认展开第一项
折叠面板折叠面板官网: 项目展示: 代码展示: 默认展开第一个默认展开第二个默认全部展开默认全部折叠这里的title名字是自己定义的.绑定的值为name的值.由于这是一个循环嵌套的面板,故而 ...
vue折叠面板的实现
<template> //遍历实现 v-for最好加个key <div><ul><li v-for="(item,index) in list&qu ...
045_Collapse折叠面板
1. Collapse折叠面板 1.1. Collapse折叠面板通过折叠面板收纳内容区域. 1.2. Collapse Attributes 参数说明类型可选值默认值 value / v-m ...

vue 实现手风琴折叠面板

vue 实现手风琴折叠面板相关推荐

最新文章

热门文章