接口数据
转换后
转换后数据
前端使用到uView插件，里面的【垂直分类】模板
前端页面渲染数据：
类别-电脑
类别-手机
uni-app 前端代码：
<template>
<view class="u-wrap">
<view class="u-search-box">
<view class="u-search-inner">
<u-icon name="search" color="#909399" :size="28"></u-icon>
<text class="u-search-text">搜索uView</text>
</view>
</view>
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item,index) in newCatList" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
:data-current="index" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.label}}</text>
</view>
</scroll-view>
<block v-for="(item,index) in newCatList" :key="index">
<scroll-view scroll-y class="right-box" v-if="current==index">
<view class="page-view">
<view class="class-item">
<view class="item-title">
<text>{{item.label}}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1">
<!-- <image class="item-menu-image" :src="item1.icon" mode=""></image> -->
<u-icon name="grid"></u-icon>
<view class="item-menu-name">{{item1.label}}</view>
<view class="item-container">
<view class="thumb-box" v-for="(item2, index2) in item1.children" :key="index2">
<!-- <image class="item-menu-image" :src="item1.icon" mode=""></image> -->
<u-icon name="grid"></u-icon>
<view class="item-menu-name">{{item2.label}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
</view>
</template>
<script>
// import classifyData from '@/common/classify.data.js';
export default {
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
// tabbar: classifyData,
menuItemPos: [],
arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
// category
catList:[],
newCatList:[],
}
},
onLoad() {
this.getCategory();
},
methods: {
// category
getCategory: async function () {
let that = this;
let rest = await that.$api.getCategorys();
if(rest.code == 1) {
that.catList = rest.data;
that.newCatList = that.$common.toTreeData(that.catList,0); // 使用封装的js方法
// 使用方法一输出
console.log(that.$common.toTreeData(that.catList,0));
// 使用方法二输出，要先用 that.newCatList 保存数据
console.log(that.newCatList);
}
},
getImg() {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(index) {
if(index == this.current) return ;
this.current = index;
// 如果为0，意味着尚未初始化
if(this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({size: true},res => {
// 如果节点尚未生成，res值为null，循环调用执行
if(!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return ;
}
this[dataVal] = res.height;
}).exec();
})
}
}
}
</script>
<style lang="scss" scoped>
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
}
.u-tab-item-active::before {
content: "";
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
width: 100rpx;
text-align: center;
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.thumb-box {
width: 45%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
在项目根目录下创建文件夹，放一些封装的接口和方法
封装的方法文件夹
common.js中，封装toTreeData()来转换接口方法
// 递归
function toTreeData(data,pid){
// 方法一：该方法有个缺点，如果子级没有数据children返回[]。
/*
function tree(id) {
let arr = []
data.filter(item => {
return item.pid === id;
}).forEach(item => {
arr.push(item) */
/*arr.push({
area_id: item.id,
label: item.name,
children: tree(item.id)
})*/
// 补充：加上 下面3行代码，子级没有数据不会加上children字段，不会返回[]，解决了原来方法一的缺点。
/*temp = tree(item.id);
if(temp.length > 0) {
item.children = temp;
}
})
return arr
}
// 第一级节点的父id，是null或者0，视情况传入
return tree(pid)
*/
// 方法二：子级无数据，children不会返回空数组 []，弥补了方法一
let result = [] ;
let temp = [];
for(var i = 0; i < data.length; i++){
if(data[i].pid === pid) {
result.push(data[i]);
temp = toTreeData(data, data[i].id);
if(temp.length > 0) {
data[i].children = temp;
}
}
}
return result;
// 和方法二相同
/*
let arr = [];
let temp = [];
data.filter(item => {
// 创建新数组，将 符合【 item.pid === pid 】条件的元素 放入新数组中
return item.pid === pid;
}).forEach(item => {
arr.push(item);
temp = toTreeData(data, item.id); // 递归
if(temp.length > 0) {
item.children = temp;
}
})
return arr;
*/
}
// 记得导出定义的方法
export {
toTreeData
}
api.js封装接口方法
//GET方法
const get = async (url, data = {}) => {
return new Promise((resole, reject) => {
uni.showLoading({
title: '加载中'
});
let url = '/url地址';
let header = {
'Content-Type': 'application/json', //自定义请求头信息
}
uni.request({
url: url, // 自己的接口url
data: data,
header: header,
method: 'GET',
success: (response) => {
uni.hideLoading();
const result = response.data
resole(result);
},
fail: (error) => {
resole({});
if (error && error.response) {
showError(error.response);
}
},
complete: () => {
setTimeout(function() {
uni.hideLoading();
}, 250);
}
});
})
}
// 导出接口方法
export const getCategorys = async (data) => await get('url',data);
项目根目录下的main.js中，加入以下代码就能使用封装好的方法
import * as Api from './config/api.js'
import * as Common from './config/common.js'
import * as Db from './config/db.js'
Vue.prototype.$api = Api;
Vue.prototype.$common = Common;
Vue.prototype.$db = Db;
分析过程仅供参考：
分析过程
网友评论