小程序三级联动，实现三级分类，顶部导航栏，左侧分类栏，右侧数据列表（小程序级联选择）

如果大家一直读石头哥的文章，或者看石头哥的视频，肯定知道，石头哥的点餐小程序有实现二级菜品或者商品分类。如下图

但是有时候我们想实现三级分类，该怎么做呢，今天就来教大家如何实现三级分类。随便教下大家如何把excel数据批量的导入到云开发数据库一，老规矩，先看效果图

先来给大家分析下原理二，原理分析首先来分析下有那三级

可以看出，我们最顶部是一级菜单，左侧是二级菜单，右侧是最终的三级列表我们来理一理层级关系=宿舍楼号====宿舍号========学生聪明的人肯定知道，我们是一个宿舍楼里包含很多宿舍，宿舍里有包含很多学生。

这样我们的三级就是 楼号》宿舍》学生当我们切换楼号时，就会重新获取当前楼号包含的宿舍。比如下图左为惠兰楼，右为学苑楼的数据，可以看出每个楼里的宿舍和学生信息。

分析完原理，我们就来看技术实现了。三，获取分类数据这里先给大家说下，我这里是用一张表来存的所有信息

既然是一张表存所有数据，我们就要做下分组，看数据里都有哪些楼号。3-1，借助group实现楼号分组(一级数据)

具体代码如下

然后获取到的数据如下

可以看出我们一共有11个宿舍楼。就是我们顶部的这些区域

3-2，借助group和match实现宿舍分组(二级数据)

这个时候，我们就要根据用户选择的楼号，来对当前楼号下所有数据进行分组了

分组后的数据如下

可以看出，前进楼有两个宿舍3-3，借助where获取宿舍里的学生数据(三级)

获取的数据如下

到这里我们的三级分类就实现了四，完整项目代码下面把完整项目代码，贴出来给大家4-1，wxml, \; d9 a& z* i8 `; e % \1 }3 b* T0 H8 z/ B: o+ { , A! d5 z5 S# @' D4 n# N {{item._id}}$ x* v8 E; x' C1 Y $ U; T) K8 F6 p9 N4 k( `: W + v, R4 o/ K5 N7 R0 `0 l1 N4 w ! @1 z f/ L5 f1 l% Z) S8 i ( s6 j r# U) M- J9 T3 l. x* c4 }1 ?/ b; V- g: W s T( B4 P 2 a" C' A' ^7 s; _7 D1 f# ?4 Q( _ 2 N9 z4 M# r# c1 O( t {{item._id}} / m9 ^7 y3 M( w4 N& z* @5 [; I% O+ A8 G) B) }8 g1 K9 @3 E- Y 4 c7 W3 Z8 v* q" \$ G' k2 g- {6 S ' U" W# M9 h6 U* N# @. H( k/ K2 l0 s; `# J/ h1 y: K 4 e: x9 q3 {- Q8 E / D/ X0 ?6 b n5 J8 v ; \/ B( {4 T% g1 p" l - @: W1 |% S, G5 i. M* ~/ c {{item.mingzi}}( q0 Y* D( _+ w* }2 y- @ 0 L, Y: W( L: v% z * q+ a; p1 a4 m- T4 A$ g/ P+ r + Z% s! J7 r4 \3 h2 i / Q; H6 }: [/ l1 w N

4-2,wxss样式/* 导航栏布局相关 */ C% F" U) {6 h6 i" o1 K$ Q } .navbar { 7 Y* Z) V9 @2 J" ` width: 100%; ( L4 s: \$ h1 X, @/ e- a3 P height: 90rpx; I0 k# ]3 r1 E. w: e7 S, @! O /* 文本不换行 */2 m4 p) I6 q* q( p, z white-space: nowrap; 3 c% g* L- V+ Y& ~) o9 f! m* d display: flex; ' R8 Z$ P5 K1 @$ P* i box-sizing: border-box; 1 [ @% R5 Y0 ` border-bottom: 1rpx solid #eee; `8 v5 X# z, A0 I background: #fff;" a9 D2 L1 F! @1 {; U# K align-items: center; , W+ }) N, t9 }+ K8 C$ v /* 固定在顶部 */ 8 u2 V1 U" q" l+ P position: fixed; # }- Y4 x# Y. e- F7 K left: 0rpx;, _! C" K- U" C) M( c1 m top: 0rpx;' p8 {& `8 O) w k. L0 @$ {% o }' [% Z: x9 H. a( ~0 |: M9 E- V 5 u' t+ T, ?4 Q* Q! _ .nav-item { 1 n' N: }- a/ l0 g& u, t" d padding-left: 25rpx;8 K) q2 u ?: d. T- T P; d( I5 u padding-right: 25rpx;. H9 }& V8 S$ x; ?: F9 P8 E% Z height: 100%; * K V7 q: c7 n- B display: inline-block;8 L9 _" X" G4 i4 F0 \, I /* 普通文字大小 */ P" }9 [ `7 D$ {6 P2 @( ] font-size: 28rpx;0 O4 B# d; J- w, Z# C }- h- r$ x7 z! _2 ]/ ?4 j M* K* {: l / ^) v Y& n" z9 V* R. i .nav-text { $ P6 R; `% j9 C3 {6 o width: 100%;, A9 W0 h l6 [3 D5 }- j height: 100%;- }0 i; E2 u' p; m' l0 d display: flex; ( i7 B7 S5 F2 g6 X- j! T align-items: center;; n4 p: c( R' L) S8 K% L0 \ justify-content: center;: X0 c: i6 |/ [0 S2 ? letter-spacing: 4rpx; 5 a8 S1 P! T* }& S! O- s box-sizing: border-box;# W6 Z, |) n# a$ h9 y }/ ?0 \6 g* |0 k: i" I8 m& @0 z # B2 ?9 l9 n+ t8 @8 [2 a/ B: ~( J .tab-on {/ |, {+ g$ l9 H7 t$ m color: #000080;& [5 L4 s! t3 d /* 选中放大 */ : o. {* ]3 c) G& U5 P, a( j font-size: 38rpx !important; ; C8 o, ~- y5 f7 Q, y. b font-weight: 600; 2 j% A2 `' ^! t4 t' p$ q6 r border-bottom: 4rpx solid #000080 !important; 3 W) f5 X9 q0 w* }' E } 3 \# s1 G9 r; \; A. [1 h. N, {6 A* U( J /* 正文部分 */1 c2 c! ^9 y$ C+ n0 P( y7 g" Q .container {% o( B1 ^5 t) D6 m& k9 S) ]* | position: fixed; 0 v" {4 Q* q" e( G- R! ] width: 100%; 8 d9 Q! ]0 j2 [- D3 B; t! l height: 90%;2 Y( A4 j1 I- Y* y1 B) B top: 100rpx; I: l( d* j; a: Y6 F0 h9 Z0 B background-color: #FFF;( B0 Q" v ^) L8 A: `4 ]6 u% N }5 g* I0 r# d% y. l 1 X/ l: s3 I( g .nav_left {/ \8 c% d7 J7 L6 D" R: V A width: 25%;4 m, O; k! j( P' N3 c6 H height: 100%;. I! e% l0 ?" }8 Y" \ background: #F2F2F2; : ^3 k9 X# E# @ text-align: center; 0 B7 I0 }& F3 s1 D# ]7 K0 }/ f" F position: absolute; ( e; E; j3 k% A9 E9 F( K7 d top: 0; 5 b0 o1 b0 u. @8 w7 F left: 0;2 _* I ?; b& s* p7 f7 C } " v# t/ E. H. ^1 Z% r" M, F. M ~8 i" M1 l; d: U/ Z- h .nav_left .nav_left_items {: |0 V g, \' ~ height: 100rpx;. K$ o; Y T$ R2 [ line-height: 100rpx; ; P% G' h/ F8 M; M$ h, s1 n4 W font-size: 28rpx;% [% l; Q) ?& h5 T# ~' Y }3 F. q3 B& c& \. k% b c5 R6 {: r; d; i 8 v' h5 g/ I& K* ^3 c .nav_left .nav_left_items.active { , x) Z# U- t/ I1 \ position: relative; z& N' l8 ?/ N6 q( n background: #FFF;# S+ u, `# ^+ L0 z/ S4 }: }% h+ m/ g color: #000080;2 L- k/ }0 n N& Q9 R& U } / v+ w* F/ \1 `' J9 \ 3 ]5 V$ X/ L/ ?1 U% Q' a( ~' | .nav_left .nav_left_items.active::before { 6 k- I# @5 U% e. K) R" y display: inline-block; + E, k: n' p' X4 Y width: 6rpx;& W% B. m7 Y* O& S: g. V! c8 e height: 60rpx;/ o2 C2 _6 J6 z. k background: #000080;' O f0 t7 W( H content: ;1 S# H5 B8 k3 u4 r3 h# K' K5 X w position: absolute; # V( v# R6 L' s% b top: 20rpx;7 S. R7 h. q( C9 Y, R2 x2 Q left: 0; 8 C2 n* |) U4 b+ @' ] }7 o- B! a2 R# n2 R0 g4 D* B5 m- p 2 p" a7 P' J; R .nav_right { 2 i& H- N# k5 X v5 D: i* L# } O position: absolute;9 F* d$ E6 s: g6 q( ~0 r$ C" } top: 0;4 h4 I0 R- |; {5 c3 J; T right: 0;* ~7 q! b. r" i0 \' D4 m width: 75%;0 M- h4 k3 K0 E2 |* z( H height: 100%; " y, S! C8 N, H* f4 K }- h0 U' `$ g; v& q. w 3 q0 p+ F4 }9 A* [8 }6 o4 l, p2 x/ i .nav_right .nav_right_items {- X, o" B0 d! E3 p float: left;6 y9 y( d5 C$ M- v9 s7 C width: 33.33%; * j: O" E5 x8 B0 f( r/ p e text-align: center;- B+ u) A# b7 V. w9 `% @. N9 U' X padding: 30rpx 0;, q& n+ S. D u- E4 J }+ `4 C$ D8 v# s3 I! e8 G! s- \ ' p% I$ ^8 x: H9 Y3 }) q .nav_right .nav_right_items image {+ z% B7 A* l, D K; M: @ width: 120rpx;6 x1 d$ C) e7 b/ G% {5 F% R9 K height: 160rpx; + v) W3 n$ ^) i# t8 Y B } # k) \7 X- F6 L4 T( y 1 y: q0 b; o% A6 o .nav_right .nav_right_items text { , p3 ?6 f7 a9 B$ D" Y9 b, ` display: block; 7 G O* G, ~( w" V! G! d) d, R margin-top: 20rpx;. {0 L i% B, A" z$ p font-size: 28rpx;* W1 o1 R" c" Y: V% y overflow: hidden;! C. ?' D- Y9 Z9 i6 Z2 y white-space: nowrap;: k" _; l7 m* D7 D! q text-overflow: ellipsis; : N& K" S6 W: |6 Q) O! F2 S }+ P9 a3 j8 h v3 g4 b7 m6 \8 Q% d3 e - r$ o3 e8 y1 r, V& r9 R .nocate {" C7 I% z9 B( R$ { padding: 100rpx; ; e; ?4 P a9 C8 K text-align: center;$ Q8 R, d: g! m' a: |/ n }$ w" R0 K. x/ {5 ]1 f6 U6 F& c j: f 8 ]' L& A: h9 |3 W' f% | .nocate image {; {7 x. l! u6 M# x$ u5 g0 b width: 70rpx;0 u- ^. }! {6 F4 V( z4 t! l height: 70rpx;8 n0 b5 [- U% d2 T. ]! d. X } 4 j& }+ @- ^ @ $ S$ N" I4 e$ X- ^- I6 H* r; G8 ? .nocate text { # B8 b0 I) u. Q( e. m; L- }0 q( g font-size: 28rpx; 7 h# c$ x% ?6 J' b* H: j display: block;7 [$ m1 s. \- M color: #BBB;: U/ D# }7 l) W$ w$ y; ]% c% T } 6 W: c* \* { J0 q3 m$ H8 ?3 }* }( B' ] i2 I$ E$ s /*隐藏滚动条*/. \8 B, e6 u: H. n* s0 r6 t8 Q) q ::-webkit-scrollbar { . l6 K: _% v! ~7 h1 n, w0 _- d9 _ width: 0;9 k0 m( Z1 a- t. J height: 0;; I. b( H3 `3 o) m3 s, h n, X& v ?/ K color: transparent;0 w0 l/ t( Z' Z# z+ d' r3 b6 N } 8 I+ ~* k( M7 Y) J 7 C6 w. @* D: e' s! {, ` .topx { . g: ]# L' W5 k& R9 t6 A width: 90%;3 Y" X. i2 D4 D8 n& W S I /* height: 700rpx; */ ( A' J1 C/ A2 F5 N0 a margin: 30rpx auto; 8 o W# n0 X* G7 o8 r z-index: 1;/ J7 z" ^! _5 T+ y- _- S/ f border-radius: 10rpx; 8 C5 w X0 W" i( h- e background-size: cover; 7 V' d. i6 Z9 m. { }

4-3,js实现分类逻辑const db = wx.cloud.database()5 q' l) w. k# @, i4 W const $ = db.command.aggregate # k1 _- p) J( ?" D' Y' N4 b7 w Page({ - P3 B, z% }+ b0 F9 p; X9 v data: {" B- X% `; Q7 a4 w8 O( V( S- } tabs: [], ' @8 y( @* D+ y h' P- T tabCur: 0, //默认选中$ `3 F4 C Y M& M1 D lefts: [], 9 G6 b6 b2 P' ^1 d; v leftCur: 0, + u- ]$ _3 Z: p5 S2 s' c% f rights: [], 6 z7 Y+ g" ^/ |/ ` ~% O& l( L6 d H& e4 U }, 5 M1 i( N$ z/ }# Z onLoad: function (options) {0 O3 r+ \0 h% B6 w& E& f db.collection(demo).aggregate() " t8 G( u/ m4 V4 R .group({ 7 _9 D: }2 o# _( V7 H _id: $louhao 4 z- U, e2 g, L% W; |0 V }) 9 H+ ?* h" D* A8 k6 d. C% Y .end()) I2 R/ Z3 ]6 J .then(res => { ' J B4 s2 J5 e) h console.log(楼号列表, res)- i, d/ D( q% s: R( ?4 C/ E! p this.setData({ 7 H. |# Z J1 P% @! h+ u: `4 } tabs: res.list( t6 x# V/ d& `' s: e: v }) + x' L5 y$ S# {1 ?$ r% k this.sushehao(res.list[0]._id)- G0 }5 Q% H, j9 i( W/ m1 S })- [; h/ }5 \) [# W! s },5 R4 p& R1 B+ a9 M4 l& F" A i/ B //加载当前楼号所有的宿舍号 + e# {+ [7 h! H0 I. |, Y sushehao() { 6 h0 B& f; i7 C% u let louhao = this.data.tabs[this.data.tabCur]._id( e6 E$ M2 j" D) p: l db.collection(demo).aggregate()) b+ g d' I- @: N h .match({, V3 w# F: [; X0 Q& B louhao. A, }5 K6 P1 j) P& k8 H1 U! f; j }) + s6 R2 f! t6 ^. w2 {! w& J .group({ & F4 F+ S$ p R# P- |, x' h+ }' { ] _id: $sushe ' e+ V! o. G# e }) . Z# y7 ]( X' h& z .sort({ - m: o, l$ ^* _ sushe: -1 //宿舍号升序排列 ! Z ]; B- d3 K }) 1 c3 N) I7 l | .end(); y) Y" _6 C8 e. U2 O1 E) h( d z5 W7 c! J .then(res => {! O0 Y( G$ n# D- d8 o3 ]0 R console.log(louhao + 宿舍号列表, res) 8 b+ `) Y; I: @ this.setData({: D1 ]7 V3 |9 \- X$ s0 r% g+ i# A9 y) C lefts: res.list ! V6 t% Z: K3 a* q' Q! E% l3 \9 ]) L }) ( x1 B7 \+ n j- E; j this.xuesheng()# I4 k2 j0 Y7 S( o) n- S& q }) 3 O* |0 j* ^5 E2 w! j }, . a) s0 i2 n+ p8 u% I! f //加载当前宿舍号里所有的学生 ( j7 k( k- J% x# C2 Y2 h4 X& @ xuesheng() { - o* v5 F! J: A \5 t# w# |4 E let louhao = this.data.tabs[this.data.tabCur]._id' ?. M b) V' f9 J* L let sushe = this.data.lefts[this.data.leftCur]._id + u* O6 x1 T) X: W, ?5 B db.collection(demo)+ }6 e5 E. G, S5 S- Y( y .where({ - M& W3 G/ ?( z; A% x louhao, - I4 J$ D3 g* i2 s4 Y sushe* Y6 T2 x3 @' _+ ~6 { }).get(). l* K' S+ U0 W .then(res => { * U5 g7 E: _0 |: d- V8 t9 c+ y console.log(louhao + sushe + 室学生列表, res) " {1 w$ d" U/ M this.setData({ ( [% u- Q' Z$ c2 K! C rights: res.data " Y* ?: j0 W4 J! ]& W2 y }) 2 T$ }5 Z' }% y })* v# \5 p# t' u }, * C* r& `- b3 e0 h; P# E //顶部选择分类条目/ Y% ?' i; @$ m0 j Q0 ` tabSelect(e) {4 d' m: U m; |: R4 w9 q this.setData({ ! t0 g& r7 m6 v8 c tabCur: e.currentTarget.dataset.id,: K* U' j% i( T% ]6 F scrollLeft: (e.currentTarget.dataset.id - 2) * 2000 _$ a1 C N' u! P- p' ? }, success => { # Y& p' h- x) E' w; i8 G this.sushehao(). Q" [3 A0 Y. N. p& I2 U })/ u! G* f! l- |. {" H }, 0 f# C- q% s* q //左侧条目选择 : Y! B$ [& `* R7 r switchLeftTab(e) { , K/ G% c$ ?% r) r7 H( S7 F: h let index = e.target.dataset.index;0 I2 |- ~! @2 j* h: E' d, r+ c! Y1 w this.setData({1 D+ c* R2 c7 S v leftCur: index,0 r2 i6 Z7 T* ~! i$ R- R }, success => { 9 w7 b; W# C( n$ U this.xuesheng()7 v V% ~# Q* O; J; l' q }) + x- e! L$ ]* w% I* z( C }, ( u4 @- ]& ^: W1 o })

4-4,记得修改数据表权限修改权限为所有用户可读，仅创建者可读写

到这里我们的三级分类就完整的实现了。关于excel数据批量导入，我下节再做讲解的。欢迎关注，欢迎留言交流。