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

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

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

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

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

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

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

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

具体代码如下

然后获取到的数据如下

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

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

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

分组后的数据如下

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

获取的数据如下

到这里我们的三级分类就实现了四，完整项目代码下面把完整项目代码，贴出来给大家4-1，wxml * @. w; k8 X+ ]& P( E# s0 H& Q) B ( f, c. @4 Y" m9 n% j. }; |. s m) s% I {{item._id}} + J8 e* ]$ P# }. D% Q7 G! A- | # w- `; T/ ~) u) o5 J2 n5 p; o 6 y' s% O, l9 |8 z! E8 W 3 q8 S( M7 ]6 U6 i4 K- @( |. p! C5 a7 n " G, ]& i5 }8 F" F; e7 H4 L: u1 y l, ~ : v8 ~0 G1 O" G {{item._id}} 3 n; q" w2 m5 W% L. B4 Z! S1 z. s$ W6 y( C * ]6 ^! _9 u/ @$ M1 l2 A2 N5 ^1 B5 }+ V / u6 t2 X, d" o7 c% \ $ v2 W& a% f/ v; u4 h9 D6 F! E ! W5 s& H8 S+ V5 @) m* \. |7 x; Z. k7 B/ [; K ~. N$ r ) M% u9 M9 s9 e- ^& g* R T( q: x: q; m' r3 Q$ G! e) B$ x9 W {{item.mingzi}} 4 z( M2 S9 G p8 x # X T3 L# i2 q, ]: U8 g0 H ( N% K7 C3 c0 ` Q5 I% Z% V$ ] l N3 w" m" n6 G. n 4 J$ ? L( U* v: ], [

4-2,wxss样式/* 导航栏布局相关 */ ; _" o9 x4 E; o) j .navbar { . T8 g# [) I6 S width: 100%; % @: c! O' L3 o1 B$ N2 K+ w height: 90rpx; 7 e' Y4 |& ^! I7 P& s' r5 T$ i1 { /* 文本不换行 */ , h8 Y* j. I! A3 R- v white-space: nowrap;9 _4 [9 J! o, F6 K% c display: flex;, e8 o* U$ i# E2 Z2 V j$ s7 r- B9 c box-sizing: border-box;7 d* o3 O+ R! z6 b border-bottom: 1rpx solid #eee; 2 }& X7 Y) s+ Z7 E9 P# Z' `$ y background: #fff; * k# y/ e! ^( l/ w+ f align-items: center;& C- a# l) u3 D, x4 k2 }' W /* 固定在顶部 */: [1 |7 X3 _/ i position: fixed; ( P2 j' V# e9 g- ^+ n6 d left: 0rpx;! M: @& j$ b- z) x' K; B top: 0rpx; - l% D; B' Q+ w. s }* i, f0 g7 f0 o% P: @ , X8 i/ s/ I. }7 I$ k3 T .nav-item {3 i% f; X4 @+ D9 L/ |: S9 \' {3 m padding-left: 25rpx;# W7 F$ K+ N( ~8 N8 t padding-right: 25rpx; 2 H0 f R. T0 J' V* \2 v% `0 x height: 100%; 9 f) U: L0 j) \+ B display: inline-block; ; D% x/ D7 ?& ?2 _) @' e /* 普通文字大小 *// ^! Y' h* {' S7 g4 s( ~/ d font-size: 28rpx; ' D! j8 d! h) \7 v& }$ [0 C5 f. a }, _9 B0 h& U0 q; a 7 p0 S3 r, h! ] .nav-text { % L/ J, T- c4 h! M0 Y3 g width: 100%; . z7 T! L' g* E j: N1 J7 K7 _ height: 100%;1 a7 }9 R! X- U) _+ n display: flex;- Z5 h0 Y$ _# W/ b1 g align-items: center; 0 B' d# B& l3 y# J: L" i2 j justify-content: center; + Q! a. l# K/ C) w5 d1 m' L letter-spacing: 4rpx; ) g* B7 H* n8 ~3 Y; n' a* {& p7 W box-sizing: border-box;3 L6 v9 H' i S% g7 {. b } ! M3 X- D, [4 W; n( t+ E5 n, L1 J: _- r+ y .tab-on {, ]) b' i& P. }: m color: #000080;/ G" p. g% T2 Q /* 选中放大 */ ( b \) Y' C& J. }2 ^: R' ^ font-size: 38rpx !important; ' h2 L. N' I% w7 D+ f+ b font-weight: 600; % g# {- V8 `- ^' _8 U: N border-bottom: 4rpx solid #000080 !important; 3 ]5 A# J; o; b }3 \1 v& y- R! L: ?4 A( |! D( v ) K& m6 A, o( a5 l( s /* 正文部分 *// p" [. {; M2 \ .container {( [" h$ {2 h) h+ ] position: fixed; : B0 v4 n4 f% n" d I+ q: s width: 100%;+ b4 z$ I2 i) ~4 } height: 90%;, S3 r/ e6 k2 P0 A/ x5 l$ N top: 100rpx; # q, u. _4 h5 H background-color: #FFF; 1 ~) I) o; V3 Y/ V } L9 i( ]" l* c+ D; y) v" _! `6 u1 [+ L; D .nav_left {0 r8 ]! s9 Z1 x5 L8 H0 N/ H! M( O width: 25%;- d) m. D# k+ K/ H3 G e( ~; p height: 100%;' p6 r, A+ ^. Q3 |9 Q( T. g' N% h background: #F2F2F2; * I2 ~0 s, q$ Z0 ~ text-align: center; ! S. d* f, `1 M5 A- v7 K position: absolute; 8 q" B. s1 g0 h1 F top: 0;7 o& q! u5 X T# Y4 S: Q6 d left: 0;9 G/ A2 [ i# Y2 n6 L4 u6 m; A' v } 7 v1 |6 x4 @) F- ^% u+ U y F0 i$ I D% w3 A8 [ .nav_left .nav_left_items {. `0 Y$ T2 E4 k2 J& p7 n! x height: 100rpx; : Q {2 |1 i* ~/ M% q2 L. h9 o: t. Z line-height: 100rpx; & V6 ?# j0 a1 R! r& A- o8 h, e0 S font-size: 28rpx; 1 K, B1 p$ O F& l' m9 ? }' Z2 `3 ^; k0 `7 b6 s % Z& J1 P! ~+ T .nav_left .nav_left_items.active { K" F( M5 }/ n0 C1 R9 Z position: relative;8 f* H+ R; }; J$ b# V. \0 U" L3 B background: #FFF; 8 I$ \- Z( _/ x; o/ r; w color: #000080; 3 k; d1 \# e: ~( A9 r. ] \# H3 z } 8 d/ s6 R* D' ?2 g" R; }" y 3 D9 o, v9 ?& I) d, e/ T .nav_left .nav_left_items.active::before { & o6 B& J* l7 G) ] display: inline-block;9 ]; ]1 U0 H0 J1 T& K7 n! f width: 6rpx;- C8 R+ p, b+ S7 j8 i; B height: 60rpx; 5 ~$ |0 f: m5 J& E& q: ~ background: #000080;+ m7 b* d5 _& e content: ; $ ?0 q( G$ d( P9 t3 K" m position: absolute; 1 m2 F! @! a( c) l+ K% V top: 20rpx; 6 v } T3 _# m- N1 z left: 0; - |0 A$ z- b" b- s( ]4 d9 o }+ `! |& R# v0 j/ o$ ]: N& \8 I 5 C' [- S' ~5 F .nav_right {1 v9 H; U- O$ M) e0 P position: absolute;* U# U! {2 y+ g' G/ |/ m$ v; _ top: 0; 2 i. s" C) |, u right: 0;9 ~ d% h6 K s2 S width: 75%;- X; r9 f; {1 o; e height: 100%;& U7 Q3 B% Q) X* Y' i, ~2 o; P1 L } ; O0 w( X% Y/ Y! Q' O# L/ h a# O" }& i7 Z& o! A .nav_right .nav_right_items { % v5 y" i8 V6 H& a, t8 W% U+ y) K float: left;2 G6 Q/ W" _, x width: 33.33%; - \* S0 z9 L3 u/ `/ p6 ~ text-align: center; 3 N) N& l0 ]& T- }9 E" j3 _9 H padding: 30rpx 0;% t; M- H4 X: }+ t }0 [8 G. G. ]7 u( k! |1 ^8 m # { i! F0 J( ` M/ j .nav_right .nav_right_items image {' D. @- H0 }: a4 C% I" V width: 120rpx; / y8 v5 n/ t) d, Z+ }3 L; v1 P height: 160rpx;: Z1 Y1 Z) a/ c& ?) R K2 z } n- e. V8 \, j+ o! U, d8 w$ ?0 E( f& } .nav_right .nav_right_items text { 2 e' b. S0 i/ ~. ^" k6 m: H display: block; * [! k) U/ U& d' }& [" m& E9 s/ H margin-top: 20rpx;9 b) O( @& S$ S5 u font-size: 28rpx; ( V$ b# `+ G$ [3 \6 ]" { overflow: hidden;, N9 D$ Y- ~5 V& X4 O: I. e white-space: nowrap; ' O) V3 c: {) s6 O7 I( ] text-overflow: ellipsis;; Q" B$ y" i5 L. [* C8 }; p }% Y% w. C9 D+ i" g- t1 e V - C2 ?; \6 x$ ^1 u! F& _0 e1 B .nocate { 2 `( Y z$ s; {+ m- V% s" s# S padding: 100rpx; 9 |6 ~2 T l/ R6 ]: k text-align: center; 4 l- ]9 S8 G [) G4 `4 z* t } ! Y w( Z! P) `7 @: K0 W8 g " b- h! r/ s% o; S .nocate image {, W; |8 i3 y1 a+ u8 U width: 70rpx; 7 U% f- X" r$ T% j height: 70rpx; 4 ]7 b7 `/ m; s2 z, k } ( x: Z) {( X, a0 S; I$ u0 A N, o6 u .nocate text { - @- C+ ~* d, G2 [, w font-size: 28rpx; + i( j0 p0 V. |' [% s display: block;) k- _! O/ `) K# F color: #BBB;3 q2 x2 N/ q7 I" _- V } v a7 I# Q8 S: z2 a/ h 4 S; U+ |; G0 Z /*隐藏滚动条*/) X6 B) F {/ D1 @8 H ::-webkit-scrollbar { # h( z) _3 {- Z" y7 } width: 0;0 Z. n! K" z" A height: 0; : Y2 R; ~' _6 S# p/ ` color: transparent; + C+ Q$ ~2 L+ o4 [/ k! o }9 N9 Q/ j# v9 N ~# V2 G : P, }4 z v6 w* z( M .topx { 4 n( ^6 X0 _; r7 G6 j width: 90%;6 W h' [, Z6 C' w, a /* height: 700rpx; */ 0 c: h: Z1 B( w* _ margin: 30rpx auto; , }+ e! [2 }, D6 X o z-index: 1; / ]! ~: p6 M- G/ U9 @% O/ Y border-radius: 10rpx;/ K% D: N$ c, A/ M# S background-size: cover;- Z) H7 b+ o/ X( e+ [- J! M }

4-3,js实现分类逻辑const db = wx.cloud.database()$ M b( o9 s5 U) e6 p4 J const $ = db.command.aggregate : M! \2 C6 C' w3 d* ? Page({% g6 @$ F( e- m6 a; Q+ w data: { 8 _9 M7 l" @( }" ^- v' | tabs: [],6 ^5 n; m$ n: d tabCur: 0, //默认选中: E8 q1 C8 \: Q N4 N8 b" W+ ` lefts: [],* l% w9 s' ^( e6 i# r1 ]( |' I leftCur: 0, 5 ~' O' x0 h: S/ v" d9 @: B# A rights: [], * ]$ j z+ k9 \8 _5 ]8 x: v3 S' \ K8 X Y1 y( Y0 f },9 Q( c* z9 P: c onLoad: function (options) {+ }- r/ f% v' i5 b9 ?- D db.collection(demo).aggregate() % Q) V3 I4 d1 T9 L$ | T .group({1 O$ h$ @ ]$ h5 ~ _id: $louhao4 R! b( J. K) g. ]1 d, p9 W })# V% d; O1 u. |# X* f: A, l .end()/ d" {* y8 O$ ?" b) }6 O0 E .then(res => {! s$ T# j- q# c! q3 C& q console.log(楼号列表, res) 9 z; P7 i0 ~2 S. n: {6 q this.setData({ X5 o' q& g* B( I+ {3 U; D% g tabs: res.list% ^% [! {5 \# f1 `/ F" e })! b$ u H/ N$ Z: G3 R4 H0 p. \ f this.sushehao(res.list[0]._id). y8 O6 f: [: R$ L6 z' z }) 3 B+ j9 b5 m9 I8 M },5 o+ d0 p5 a- j+ K! }/ s //加载当前楼号所有的宿舍号 5 A8 f. O; b q% M6 Z: J sushehao() {' a% C( r" b6 w$ R% d, z1 y1 e( M let louhao = this.data.tabs[this.data.tabCur]._id! [% G: l2 D- ^8 A. ^" y db.collection(demo).aggregate()8 R" `6 i( A0 n$ N2 i5 o .match({; `. F3 R. |/ K8 L louhao ( V& ^ ^; i( S& G }) W, c) u2 G8 Z" i# F6 A0 Z .group({ $ r' l( V# {( `- F" b _id: $sushe8 [' S% P5 j6 J: q }) . f: @ X) w! h, d9 u .sort({7 F: o/ _" N/ \6 p5 J sushe: -1 //宿舍号升序排列 4 ^! u% p/ a: ]4 w3 s! y: y* w })2 g- z+ C: g* B0 d1 b( Y. M G+ I .end()0 ?7 n I. g( b& i; M .then(res => { & g+ i( K0 p5 L console.log(louhao + 宿舍号列表, res)5 S* N7 l8 c) H this.setData({1 J# _5 ^7 v; k; Z1 @7 f lefts: res.list$ t5 v* ]4 D T* M' `/ T })- k; A# F! {3 l9 j& z. X this.xuesheng()2 d1 R! M6 |" l& p& ^2 }5 A% s })2 h5 l& B& G* n. { }, & |3 K; Q9 Y' [) ~$ F //加载当前宿舍号里所有的学生 ! X7 _% E# i' Q/ p Q4 z xuesheng() { 6 M7 d- b" l n+ D, }8 R let louhao = this.data.tabs[this.data.tabCur]._id % b0 k V0 P% e- S" d let sushe = this.data.lefts[this.data.leftCur]._id $ E- p$ E m9 c( C: M6 i4 P- _) p db.collection(demo)+ p ?" C' n* Z/ |5 O) ~! d' H .where({2 \# L3 \0 u' [ louhao,% _( t x; [: O1 P# V( H( a sushe 3 U7 \" _& `7 y6 z% Y& u }).get()( c. L; O$ O& [* h3 V J3 ]* P .then(res => {. }$ M' I" m7 O5 J' [) O: k1 H# W s console.log(louhao + sushe + 室学生列表, res) . j) _$ L* Z- |: G/ ?, A1 J this.setData({% P! ^4 V8 q# \0 y8 E9 o% s rights: res.data6 p7 |' x7 x9 j7 f3 f: v }) & n$ q) H0 U' P6 o }) 2 q9 w6 p1 a G" J: f( C* a; ]. S, N( @ }, " X+ X# r/ C! Z. g8 q9 U //顶部选择分类条目 ' T6 l! b6 S1 W* a tabSelect(e) {* f4 v+ a. E2 ?- U8 a this.setData({* u! R1 ?8 {# E' W: J |2 U tabCur: e.currentTarget.dataset.id, " H! U4 N; O3 B& c/ } scrollLeft: (e.currentTarget.dataset.id - 2) * 200 3 `. P9 y* ?( h4 ^+ T* f( w/ s }, success => {7 l$ l0 U8 ^( L, t) v: v; e this.sushehao()' m& B# s% \9 `; R, W0 c6 i3 h7 D }) + o- F8 V( x+ e9 j0 U }, & `: U" w+ R" [- l3 S/ k //左侧条目选择2 Y% y7 s. M+ L switchLeftTab(e) {/ u' a6 b/ y6 Z/ t; E let index = e.target.dataset.index; . s7 o( f' Y. B! W: y* b this.setData({6 Y7 O) j, N( H leftCur: index, ( j% C8 T) s+ B- O5 T8 n# B I }, success => { 5 g5 W" R6 Y2 u. }* D this.xuesheng()! V8 u @1 p+ q e+ V8 r })& _+ _; w5 t8 ~! K }, 7 S' |6 M3 l# u% I7 m, G. q })

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

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