|
+ E* J' m$ Q; y {! V' |. Q4 R 如果大家一直读石头哥的文章，或者看石头哥的视频，肯定知道，石头哥的点餐小程序有实现二级菜品或者商品分类。如下图  + F& d3 W, g |$ y3 q
但是有时候我们想实现三级分类，该怎么做呢，今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库一，老规矩，先看效果图  & ]* j% l( T- q1 X$ j* l2 a
先来给大家分析下原理二，原理分析首先来分析下有那三级  , }9 f. D( L. I: i
可以看出，我们最顶部是一级菜单，左侧是二级菜单，右侧是最终的三级列表我们来理一理层级关系=宿舍楼号====宿舍号========学生聪明的人肯定知道，我们是一个宿舍楼里包含很多宿舍，宿舍里有包含很多学生。
' _; y# k3 `3 W u8 v1 N 这样我们的三级就是 楼号》宿舍》学生当我们切换楼号时，就会重新获取当前楼号包含的宿舍。比如下图左为惠兰楼，右为学苑楼的数据，可以看出每个楼里的宿舍和学生信息。  ) R9 Z, ~- t# _& S
分析完原理，我们就来看技术实现了。三，获取分类数据这里先给大家说下，我这里是用一张表来存的所有信息  ! O$ @8 s0 a! v% B
既然是一张表存所有数据，我们就要做下分组，看数据里都有哪些楼号。3-1，借助group实现楼号分组(一级数据)  / w* \# d) J ]' G( X1 W
具体代码如下  1 I( A9 [4 J8 i9 X! d
然后获取到的数据如下  ! n; H0 O; j2 R$ v# n
可以看出我们一共有11个宿舍楼。就是我们顶部的这些区域 
3 h8 A$ O! E# H( U 3-2，借助group和match实现宿舍分组(二级数据)  : ?2 \( ]/ @" |; @
这个时候，我们就要根据用户选择的楼号，来对当前楼号下所有数据进行分组了  & ]( ` ~. H6 h
分组后的数据如下  , o9 S3 X+ {5 m
可以看出，前进楼有两个宿舍3-3，借助where获取宿舍里的学生数据(三级)  . f( O; G( \8 ]/ P+ }$ U
获取的数据如下 
9 y6 c B; b+ l- T 到这里我们的三级分类就实现了四，完整项目代码下面把完整项目代码，贴出来给大家4-1，wxml3 ^1 h- ^ L5 u& C; |/ H, ?9 D
1 p7 w* [9 C, J2 u- d) S
" `& b5 {' m3 o5 x {{item._id}}" m9 F6 E9 ^$ `' i* F
3 V3 o0 e2 u R, @. e% Q( A: B- e+ b' ?- F
# M x& q6 u3 b+ ? [
% {) h, x$ v+ U7 T V1 q( I6 B# L+ l5 w- X
+ F0 q- @, e5 `
m( G) X4 ?6 K! J$ p2 W' E3 K {{item._id}}
6 j: I; C c5 f& D* t6 E
" t# |+ `% l7 @* m" N! L. r, B# @+ ]9 ? R$ q g
- L" |3 A2 U' r* v# o& c* F
: J" D/ }5 s2 F& l! _
- w8 e$ T8 f6 E g* o% O* [! A- `- F+ r" D( g( s9 q
1 i+ f. [( S+ d% }
( u. Z7 j9 c: A {{item.mingzi}}% E6 h7 ^2 W6 Z7 z
0 f4 L ]! |/ q- @! Q6 ~) p
# s5 D @1 |0 {( G$ L* r/ [2 E# j n% i
( e" i' t% k3 E; d W$ ?* v7 l& h
% v9 ~1 A0 U) Y 4-2,wxss样式/* 导航栏布局相关 */
4 ^+ Y7 I6 H8 Y, o0 _, r# t .navbar {
( A9 J# n3 M+ i3 p4 P- B width: 100%;$ n7 Z9 A+ i7 a; L
height: 90rpx;
4 B4 S, n) ?+ f; }3 i, t /* 文本不换行 */
/ `2 J& G! H) m4 [( v- A: q white-space: nowrap;( c6 Y. }; |5 n3 f& ~$ _. Q" O5 `
display: flex;, a$ q, _/ j* e+ \* i- o" ~
box-sizing: border-box;
/ x! X$ U" P. S) U' X, W border-bottom: 1rpx solid #eee; _2 o0 Z1 J h. r3 D, z
background: #fff;
; [ B% T9 k* j4 X5 s) Y4 P align-items: center;
1 H: s9 g. W+ U- C& ~" s0 [# E /* 固定在顶部 */
' z6 Y# {7 R: i! A7 d# r5 \- R position: fixed;
- W. S, a8 P. [7 G F, l2 s% U9 t left: 0rpx;
. i7 z0 i* u; y% X top: 0rpx;
9 ~0 O$ E `# H+ ~; A }- Y8 @ C$ a+ \0 Q+ V$ y( \
# n9 k: F/ ^# { .nav-item {1 p9 B* e3 S- w5 N
padding-left: 25rpx;
, i7 q6 H2 y+ e& m padding-right: 25rpx;
: ~. P$ D% ~2 g! C height: 100%;
8 s6 X$ ~) W" S5 r display: inline-block;
) z/ Q' A/ b6 o /* 普通文字大小 */& V4 c/ k+ r' ^! D. T6 q% W
font-size: 28rpx;2 e; B1 t( V& ?+ h3 U% j0 o! o
}
& {, D7 b. ]6 E5 v0 S5 o% Z% W: U3 o" `; g7 u" v7 f3 n( F
.nav-text {* o0 O" P; t2 t
width: 100%;3 g. b3 k1 z9 }9 D
height: 100%;' X& H# x. D v* B) s$ G
display: flex;
. P6 P+ w. t+ k, ~: o align-items: center;7 U9 a5 @* a e+ a, e* S
justify-content: center;( b/ ~- ?& L6 _3 ?2 D# a9 K
letter-spacing: 4rpx;& ?; v, C$ j; r5 S" c
box-sizing: border-box;
) T6 z Q; s6 Q# r }$ |3 e( y4 |7 w/ `$ w
1 o b8 X: e0 s5 M5 B2 e) { .tab-on {; D' y; J; W1 G j; B2 D, {) w
color: #000080;
1 v; c" Z, Y" N5 u( [ /* 选中放大 */
) P2 Z' s4 h! E- U9 D; |8 U font-size: 38rpx !important;+ w" v' z/ E! p/ u2 S* O- L/ |7 u3 }
font-weight: 600; y( y l/ O3 C
border-bottom: 4rpx solid #000080 !important;
( o4 P, c* z4 d" { _1 I }
" o5 H0 u' t/ l" F Y+ U7 q
% M4 u! W6 Q- X' n/ b3 t /* 正文部分 */9 g* P( q9 s0 {: ]
.container {
8 y, ?% {: }2 O position: fixed;# q2 k! @+ t3 k2 n/ z7 r
width: 100%;
8 R2 {* h4 i. r) q height: 90%;% f* h1 ?* Q: K v* E
top: 100rpx; Q% q1 u9 v9 }- P2 ]( R& H
background-color: #FFF;
( _ g1 }$ `0 u4 H5 c$ Q5 V" Z }' n$ J. s: f U9 ~2 P
0 h# d7 }% L( k: k% ? .nav_left {
* L( n+ H3 R$ e& ]- d width: 25%;9 {' Q9 d s" O; ^; ]+ @
height: 100%;# y& ~- F; ?& d
background: #F2F2F2;
( l& T( @0 C1 f0 k$ I5 Q' ?) E; Q text-align: center;8 K8 f. {- v; m% [+ E. Q! L* r; u( f
position: absolute;
+ P$ M' ^4 H% i2 _) r top: 0;
) W6 M" E5 K e left: 0;
8 A& s; O' K7 f9 J Z- ` }+ T: B' s# ^9 M Q* G2 w
6 M: |8 B; ^4 ^6 n
.nav_left .nav_left_items {0 U& ?. d0 w2 r1 | ]
height: 100rpx;
3 U& h9 i- W: H7 a K line-height: 100rpx;
' ^, f' ?/ g8 B font-size: 28rpx;
% n1 U- o0 s! ^* @ }3 }# G3 r+ `$ s# i/ F
6 J( f+ t3 _( H$ c) c$ G: g! J
.nav_left .nav_left_items.active {" X; b+ i! `) f& I* Q3 u. N" d: K
position: relative;
+ V. h9 c; N( r% v1 M background: #FFF;
1 j* V5 S1 V2 D color: #000080;
, ^' ^8 o6 ^) L6 p8 ~ }8 q- x" R% R4 z' p
& C! B( X0 `: H% v3 A& b( z
.nav_left .nav_left_items.active::before {, v Y. g, g9 s. a- u( W( M4 D' o
display: inline-block;
0 Z. G4 Y( r" ?6 M0 l width: 6rpx;# C$ ^1 U! \( N( M
height: 60rpx;5 t1 v4 H4 F7 Q" {6 Z( ?
background: #000080;3 g) k: B/ h, x$ \( Z
content: ;
9 i# |, {. C0 r" p! q7 f6 ? position: absolute;5 c; Y0 R' P) Q4 `
top: 20rpx;
0 c, m& V- M B& M left: 0;
( o7 Z: H7 Q) o$ A: m0 v0 e8 X }- U M" D! J( c+ G Q6 ~
, d$ D0 V+ q5 ~' o% w1 p4 h .nav_right {& I& S9 d4 o; b0 m
position: absolute; l. l8 S" L' c0 m# O1 }
top: 0;6 O* z$ h' e% f7 b" E& z& y
right: 0;3 m* B, j. X7 v1 L0 Z
width: 75%;
2 L/ v$ m# o9 {$ j% M height: 100%;$ O" w& j/ `: `7 G' R7 T
}
2 F* \0 M4 h, o4 v3 q9 E
, f3 f2 y8 [6 O* _& U! f' | .nav_right .nav_right_items {
( X/ j( h: M8 ?' R+ _9 T float: left;
: h* }0 R/ Q' `( K% R" r width: 33.33%;
: g, I5 v, l6 J2 ^) S( }# [ text-align: center;
9 f4 j/ w( X# G& { padding: 30rpx 0;* @ L: q+ a7 o) M( j6 E
}
; T" _0 r ^1 F4 M2 b. F! R% k# s+ m* D5 V* k
.nav_right .nav_right_items image {
0 ~6 }- f# h8 A2 N width: 120rpx;
" S8 j1 h" u A0 K/ L height: 160rpx;
5 s% ^. Z& z& Y6 R- g }1 n" ~1 d( ^3 E, {9 m v; U7 Y
' E3 K7 N1 o# ^0 ~ .nav_right .nav_right_items text {! k. Q4 S ~! Q
display: block;& f4 {& B8 s; Q: T p8 w5 v, {
margin-top: 20rpx;
9 R8 {. Z1 l. Q, ?+ D font-size: 28rpx;
( k) p. P; C+ [. w overflow: hidden;
) Z, @4 \& t% F. D white-space: nowrap;
, o% U* Z5 o! ^2 A text-overflow: ellipsis; }: W! M7 m K, ?8 w. s5 V
}7 F2 B) E# N- y+ o- X$ a! ^
% c* `: L( I" W
.nocate {: F1 m+ {- x2 |% I7 Z$ q
padding: 100rpx;$ ?( c+ X& N7 n7 _4 d
text-align: center;
" L* @" ~0 z0 ~7 P }
, E. W( n% l* D0 T# \9 B, F" A! G$ ~: ^0 j( e
.nocate image {* ]1 \, k. R& b$ }/ ?3 m+ Z
width: 70rpx;8 y! `+ x% W& A
height: 70rpx;
! ]; l" V0 q5 { }: d" v8 Y& v: i$ O
0 |* @9 x8 m6 z5 C8 l5 Y7 C8 I .nocate text {. M: \9 z; @$ N. n( w* |
font-size: 28rpx;
4 s$ u1 L. z: o U( y display: block;2 {9 v( ^7 f# w1 o) l, }! X
color: #BBB;5 @2 ~# w& C; `1 s* }$ V; Z- H
}
) \: S! `! Z/ x) f Q1 }
" K/ l0 z; G, D+ y9 x7 L7 C; p3 Z5 o /*隐藏滚动条*/$ @8 w+ B$ ]5 ~7 ^' Q! k" Q+ y( J
::-webkit-scrollbar {8 F q; l5 O: W7 Q
width: 0;, Z _$ Y6 z% W" g
height: 0;, a$ H2 [6 w6 @1 K& b
color: transparent;
; h: h" w* Y9 W }
/ {: ^; ?$ u b7 P0 U+ @! g& l% X) b3 n! C8 c
.topx {1 V% T, U$ R+ S- w
width: 90%;
7 W$ h B9 Q( e- Y. ~1 ^8 u /* height: 700rpx; */
2 ^9 {1 D* i9 G1 t* U9 n9 G, a7 v2 X margin: 30rpx auto;
- |" K0 c8 m3 g6 Q7 c7 O% F9 ?5 E& @' c- x z-index: 1; q) m) s6 _) k
border-radius: 10rpx;
0 v P/ K5 F& @ c% l o background-size: cover;
+ ^# l9 p; N6 K+ s. ^2 c }
! l( H8 E; N- |7 c0 k 4-3,js实现分类逻辑const db = wx.cloud.database()7 h8 k; f8 w' M! f+ K; I: x
const $ = db.command.aggregate8 z3 j1 c5 R7 t6 @( B
Page({
. [) `, Z) q; p$ S3 R$ u2 h% A data: {
6 u$ \9 k/ k2 q1 G# N, s* o" S- B tabs: [],: B/ X+ E# j) |; F ], o
tabCur: 0, //默认选中7 Y. h7 L/ A {7 i" y& M) o* f, {
lefts: [],
6 r0 l7 u0 A& L$ ] leftCur: 0,
- d3 Z! m$ X, C0 v- ^' [ rights: [],
8 i4 H, V( H6 H0 O
Y* `; g1 e2 } },
- A0 G% r7 g! s7 _7 A ] onLoad: function (options) {' Z H$ T, B; L/ H7 M3 ]" P
db.collection(demo).aggregate()' I, @" L9 O0 J/ Y
.group({
% ?; k% Y% ?; r6 V9 o# B _id: $louhao5 \" J5 {4 o4 r( p# r. g" R
})
- G. _9 z0 _! O; M .end()4 o0 r* v3 L. Z+ T
.then(res => {1 X6 ? |5 K, y& w; h
console.log(楼号列表, res)1 d- ~6 m8 o3 A. g" j8 w) q* b$ f$ ^
this.setData({
/ o/ v' l$ b4 v1 {7 K tabs: res.list
+ K( b& P; i! ] })
, Z: |2 d5 `& {# r9 L8 b( M Y this.sushehao(res.list[0]._id)
w/ ~5 p/ `! F })
* [8 {: c6 @% }! C# e5 g! J },& n. m. t- s4 q+ q6 O
//加载当前楼号所有的宿舍号
7 K9 Z8 J m: M4 [/ t, n sushehao() {
5 |3 B' V$ t* G$ ^/ t- C D& t& T let louhao = this.data.tabs[this.data.tabCur]._id' J$ I; ?+ P3 V7 B0 l
db.collection(demo).aggregate()9 x# j" Z# k% a. B
.match({
+ n: _! F* n( q# R louhao! I1 \ B% j) M1 z
})0 x% V" t7 R) o( u' K& B
.group({
W, |8 g; o/ u v, u6 v6 l _id: $sushe
i ^/ B, q3 T, O0 y0 _: A })
5 y( j) G4 H6 u) j .sort({) J1 o7 o' l! Y
sushe: -1 //宿舍号升序排列
( }% g2 V* x9 d7 f- t) m9 T; a })
: }# i7 i6 W: \! E; T8 W .end()
1 T; l! g4 y Z. E1 d) H .then(res => {
6 }# i T+ J) |) `1 X console.log(louhao + 宿舍号列表, res)6 W3 `2 R6 X+ \. @( H
this.setData({
/ w3 Z4 r# K" S7 A& p: C$ w* x lefts: res.list
' ?* |$ g7 H4 x2 q4 k" v })& Y/ A; @( Z2 v! i" z) q
this.xuesheng()+ q3 `$ k0 M$ P9 Q3 H. R) d2 I
})1 J I, f0 Z; c4 Y/ s* W6 s
},% K# `4 L: m! k, n2 q
//加载当前宿舍号里所有的学生! s* T9 l3 q- l* h* r5 f
xuesheng() {
# ?" I9 {* B; {' l0 v$ _ let louhao = this.data.tabs[this.data.tabCur]._id
8 u* p' M! b8 R let sushe = this.data.lefts[this.data.leftCur]._id( f D D: Z6 C1 g3 g9 i# L
db.collection(demo)3 x3 A( Y; ^ |& e( a& h; @6 u
.where({
4 A1 A8 v0 D2 [/ ^$ l louhao,
' U% s/ Z" r2 q sushe
, v1 @; @# e& Q) ~) A3 u }).get()
4 Y7 d1 p7 ]$ [- C' W .then(res => {, G3 U$ a( w. e9 ]4 f7 y ^6 J
console.log(louhao + sushe + 室学生列表, res)
; B% q$ S( ^5 j( c$ Z this.setData({
j9 s( }9 W) C7 y" C$ B: w rights: res.data
2 |5 Z' w2 `* o _7 M5 l })# ?" P% V" F- t7 e& L& Y- J) R
})
) W; j) I6 ^" |% T7 o& p) q# X },- ^" F7 ~- K5 j
//顶部选择分类条目
4 ?# G8 J3 y" C+ p4 F" J tabSelect(e) {' `4 x D7 `8 _5 P
this.setData({5 _4 n5 f! h: B/ C& C6 g- {1 {( j
tabCur: e.currentTarget.dataset.id,$ u# x. n# ^) ]. P( @2 {1 |
scrollLeft: (e.currentTarget.dataset.id - 2) * 2003 Z3 L* [8 s0 {
}, success => {/ c& h. s( T- V% x% U6 O
this.sushehao()6 c" e* u8 j5 T$ S7 v6 b
})
8 s* n& P: R1 S; |4 F },' Z1 X" o5 K$ j2 V" N2 B
//左侧条目选择& l/ p! m7 D' J0 E. j, R
switchLeftTab(e) {
0 K& d& b7 o. A% D7 n0 U2 K7 Z. H4 g let index = e.target.dataset.index;# T0 C: W0 X9 z- W9 G4 P! }+ j3 ~ P
this.setData({
3 X. H9 x9 Q7 \ V leftCur: index,
" K) P) Q# A2 ~) C! R }, success => {
' }/ m& L7 k! M this.xuesheng()7 T0 L" g8 H7 q& o$ y C
})
+ e. R$ j0 U3 j* B9 B },
. a3 Y& ^0 ]* O6 p( E% _9 ?1 } })
) a4 e9 p7 s5 D1 M5 _ 4-4,记得修改数据表权限修改权限为所有用户可读，仅创建者可读写 
6 l# I7 ?/ W* k% f1 y4 j 到这里我们的三级分类就完整的实现了。关于excel数据批量导入，我下节再做讲解的。欢迎关注，欢迎留言交流。 9 ]- m3 B' I# P6 @& `% o
, v1 C0 n$ z8 F5 g9 j4 G
( @+ E- t- f8 y& a8 g' m+ ?) h, I! j$ q+ o% @
/ o9 q7 v; E3 [2 a |
