vant实现移动端渐变数据展示树
一 需求
要求是一个热点词的统计展示，中间是标题，两边是展现的词，点击词展开并展示相关内容，如图：
有点丑，这是ui还没确定样式的一个测试版，哈哈哈哈，莫笑话！
二 代码
html代码如下：
<template> <div class="select"> <van-row class="select-content" type="flex" justify="center" gutter="5"> <van-col span="10" class="select-left"> <van-collapse v-model="activeNames" :class="`select-left-item select-left-item-${index}`" v-for="(item, index) in leftList" :key="index"> <van-collapse-item :name="index" > <van-loading color="#0094ff" v-if="item.isLoading"/> <template name="title" slot="title"> <div @click="getList(item.id,index,'left')">{{item.name}}</div> </template> <van-cell-group v-for="(i, d) in item.list" :key="d" > <van-cell> <template #title> <div class="van-ellipsis">{{ i.proposalTitle }}</div> </template> </van-cell> </van-cell-group> <div v-if="!item.isLoading">更多</div> </van-collapse-item> </van-collapse> <div></div> </van-col> <div class="select-mid">委员关注热点词</div> <van-col span="10" class="select-right"> <van-collapse v-model="activeNames0" :class="`select-right-item select-right-item-${index}`" v-for="(item, index) in rightList" :key="index"> <van-collapse-item :name="index"> <van-loading color="#0094ff" v-if="item.isLoading"/> <template name="title" slot="title"> <div @click="getList(item.id,index,'right')">{{item.name}}</div> </template> <van-cell-group v-for="(i, d) in item.list" :key="d"> <van-cell> <template #title> <div class="van-ellipsis">{{ i.proposalTitle }}</div> </template> </van-cell> </van-cell-group> <div v-if="!item.isLoading">更多</div> </van-collapse-item> </van-collapse> </van-col> </van-row> </div> </template> 复制代码css样式代码如下：
因为两边展示的个数是一样的，所以每一个item绑定的class的颜色是写死的，如果有好的办法能够让颜色和个数都可以动态绑定的话，一定要告诉我，orz 求求惹！！！！！
<style scoped> .select { width: 100%; height: 100%; /* padding: 10px 0; */ } .select-content { width: 100%; height: 100%; } .select-left { padding: 10px 0; display: flex; flex-direction: column; justify-content: space-between; } .select-left-item { height: auto; /* padding: 5px; */ background-color: #b2bfca; text-align: center; } .select-mid { height: 100%; width: 40px; background-image: linear-gradient(#0179e9, #dfdfdf); color: #ffffff; font-size: 26px; font-weight: 600; word-wrap: break-word; /* letter-spacing: 20px; */ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .select-right { display: flex; padding: 10px 0; flex-direction: column; justify-content: space-around; } .select-right-item { height: auto; /* padding: 5px; */ background-color: #b2bfca; text-align: center; } </style> <style> .select-left-item-0 { .van-cell { background-color: #1890ff !important; padding: 2px 10px; color: #ffffff; } } .select-left-item-1 { .van-cell { background-color: #40a9ff !important; padding: 2px 10px; color: #ffffff; } } .select-left-item-2 { .van-cell { background-color: #69c0ff !important; padding: 2px 10px; } } .select-left-item-3 { .van-cell { background-color: #91d5ff !important; padding: 2px 10px; } } .select-left-item-4 { .van-cell { background-color: #bae7ff !important; padding: 2px 10px; } } .select-right-item-0 { .van-cell { background-color: #1890ff !important; padding: 2px 10px; color: #ffffff; } } .select-right-item-1 { .van-cell { background-color: #40a9ff !important; padding: 2px 10px; color: #ffffff; } } .select-right-item-2 { .van-cell { background-color: #69c0ff !important; padding: 2px 10px; } } .select-right-item-3 { .van-cell { background-color: #91d5ff !important; padding: 2px 10px; } } .select-right-item-4 { .van-cell { background-color: #bae7ff !important; padding: 2px 10px; } } .van-collapse-item__content { padding: 2px 0; } </style> 复制代码然后点击每一个item，因为每次点击后台都要跑算法，所以加载时间不能忽略，添加了vant的loading组件，
然后写的过程中我还遇到了一个问题就是在我没加loading的之前点击请求，接口请求完了但是视图没更新，只有下次再点击的时候菜展示我要展示的列表。
后来我在watch里添加了监听，显然，效果不太明显，我就去写loading，奇怪的是我写完loading以后，居然可以用了，不知道是谁的功劳。
接口请求后如图：
js代码：
export default { name: "SelectedTopicAssistant", data() { return { activeNames: [], activeNames0: [], leftList:[], rightList:[], }; }, components: {}, watch: { leftList: function(n, o) { this.leftList = n } }, created: function () {}, mounted: function () { this.getHotWord() }, methods: { getHotWord(){ this.$http.post('/api').then(res=>{ let data = res.data data.forEach((ele,index) => { //处理请求回来的数据，添加用来控制loading的字段 ele.isLoading = true //分成左右两个列表，如果有更好的方法请一定要告诉我！！！！！ if( index%2 == 0){ this.leftList.push(data[index]) } else { this.rightList.push(data[index]) } }); }) }, getList(id, index, list) { let formData = { proposals: JSON.stringify(id), }; //这里的$qs是项目里封装好的处理数据格式的一个方法，看需求而定咯 this.$http.post( "/api", this.$qs.stringify(formData) ) .then((response) => { let cellList = response.data.data.slice(0, 3); if(list == 'left'){ //处理请求回来的数据，添加每一个item里要展示的数据列表 this.leftList[index].list = cellList this.leftList[index].isLoading = false } else { this.rightList[index].list = cellList this.rightList[index].isLoading = false } }); }, }, 复制代码最最最后边就是不落俗套的点击每一条数据查看详细内容，给列表添加一个点击方法就好了。
记录over ^-^。
作者：一路向晴
链接：https://juejin.cn/post/7029194191712288798