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

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

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

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

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

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

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

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

具体代码如下

然后获取到的数据如下

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

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

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

分组后的数据如下

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

获取的数据如下

到这里我们的三级分类就实现了四，完整项目代码下面把完整项目代码，贴出来给大家4-1，wxml 2 Y4 s9 X4 A8 Y" B' l1 f 5 q4 q' B5 G( _) Q / B+ K* r6 J0 Q! w$ o& Z% u {{item._id}}# b) M3 x% S( c9 ~/ _- B7 l% w! t& l $ {* N- u2 g) D* ` Y9 n! q - M; h5 x' u7 K2 C+ i4 ~ & {- t" ^5 N* B& i2 j8 Q* w6 g( M* j$ s 4 B* f# ]* e9 V, X: u$ s $ ^) X( r; w( {$ h * T! B( G, t* h" G) }; F {{item._id}} 4 x1 ]% O* Y/ a8 W ' M. K: a9 f1 r9 B! u5 F8 ^1 W6 { : ^$ p% n, |$ E) X! X2 U) m" Q1 X8 r- h7 T' U! l% v* ? , C) [$ u7 U8 F. V0 }9 }; [% x7 P1 Z' m 7 z- J6 t- L& h( ], m # J. F3 _- z8 U+ ?# v* H! s, X: B$ h6 r. z- s: z$ n8 _ {{item.mingzi}}5 c7 j/ U% D( X. [. G3 S 9 X9 b2 p5 z% W: ^% h9 [; A; j / s1 U. x* \9 J/ v7 J8 }' W % h6 e/ b/ v8 {" Q6 T: D- T9 ^& w# H5 R- u

4-2,wxss样式/* 导航栏布局相关 */ 3 ?" I2 a! v9 c# D# N8 G. C .navbar {/ [% s: |3 v7 x- j width: 100%;* G$ a! p# \9 A7 [, | height: 90rpx;' M% P, y9 ^& d; R" t3 B' c /* 文本不换行 */ 8 B5 ]9 }5 r e white-space: nowrap; 0 a$ z( z( I8 Q& ]) n" g display: flex;5 J4 T& R5 N- V( ~" z9 l box-sizing: border-box; + z# ~) f. x$ M0 ?/ y border-bottom: 1rpx solid #eee; ( Z. T9 i) v6 q background: #fff; 3 b; @; F8 [4 W H" B9 c align-items: center; . X: S; [& s& O( F6 q3 T" H5 R% M /* 固定在顶部 */ * _& K9 h! n9 l$ w) a position: fixed;1 J4 u. n- `' h9 T left: 0rpx;: J/ K( j) H6 X" ]6 Y* m- ` top: 0rpx;9 d, x# z# v$ z* I, A! B }! f) M" m( u0 K4 |0 n + t% l5 l/ Q( }5 R/ G& n .nav-item {7 U& h5 r' {1 k3 @ padding-left: 25rpx;$ C4 E$ |$ N l' C& x1 _ padding-right: 25rpx; 0 u% }# N# c; k3 T height: 100%; , P2 u/ P( q7 E, J2 h6 ^2 h display: inline-block; + S/ \+ N- f5 Q; F& ] /* 普通文字大小 */ 9 ~# _6 r. v# g/ S# e font-size: 28rpx; Y+ g4 S. J$ z) n- G. N0 l- _ }, v9 i7 b/ b3 q& `8 X ' J. C1 L% n. o" H0 t L: O .nav-text {; c+ J2 C. L( v width: 100%;0 L1 n7 r2 f2 w8 f( t5 I/ T8 { height: 100%; * k7 e6 F' [2 g/ Y1 B display: flex; , i' g( _6 j* e' ~2 i1 n/ | align-items: center; - L0 T, g4 R+ M% W3 g; \+ i justify-content: center;: d9 b* s" S' }5 N letter-spacing: 4rpx;( |9 u) E6 A" C: R box-sizing: border-box; 6 x5 ?+ ]/ b: c4 I4 k }6 {# M/ o% d1 d* y( y- T ! Z' } B2 Z, N! i" M) R .tab-on { 2 V) h( Z) b5 E color: #000080; : ~# c$ F1 c& U9 b3 h+ n /* 选中放大 */5 v4 W+ N5 n/ i1 m font-size: 38rpx !important;6 t9 d' }, M7 Q5 F# n; f. L font-weight: 600;4 F4 ]$ j/ y. L: `& E border-bottom: 4rpx solid #000080 !important;% R+ b' L% P* H: l/ M7 u& {4 q: t+ B6 V }7 m1 m1 C2 J' y ) O% l# d( e; M9 M& B /* 正文部分 */* z# C6 U( S0 u" Z0 a: N5 | .container { / z+ f" q6 m1 H% J2 P& z. ~ position: fixed;# p. [$ j' P. m) T, ]. d* I! } width: 100%;4 U3 P# W& n) T' J+ v# b! T6 S height: 90%; : ?5 `' q% m) U4 C top: 100rpx; K$ V+ [1 Y ^- k/ Y background-color: #FFF; 9 c, ]) q8 X* k, ~ } 5 `+ z0 n1 z% v3 P! W ; O2 T4 t) E7 T# Y6 c, F .nav_left { 6 m+ \8 b. [# J+ @8 o9 Y; E width: 25%;9 m' X4 }# F6 u. Y height: 100%; 2 B8 `" E0 |1 a' y! @2 R5 a4 F background: #F2F2F2; ( [8 H3 [ @4 Q: w, v9 \0 |* W text-align: center;# X& d C) `" v3 Y2 @5 i7 t position: absolute;$ ?$ G: I& I5 b3 t. x4 h top: 0; $ c% {6 ]: D7 E6 m3 m: A8 g3 Z left: 0;# I. o5 ?* k% P% \ } 8 ?2 v+ n3 B. J! \/ m# h, s* a7 x; N/ l, G- r .nav_left .nav_left_items {% q- `* {3 x' _4 U; S5 \ x+ r height: 100rpx; 0 r3 k1 _2 I" \* r p line-height: 100rpx;# o0 r9 g% N3 G b; b% w font-size: 28rpx; , u8 A: _; d" z% {8 S( s } ) r. C+ L8 R8 J6 X# @6 y0 W2 y4 k9 `; M `. G .nav_left .nav_left_items.active {, q% Y. A2 \. e# X; S5 u' s- r position: relative; ( P0 Y2 s- A+ N4 n8 z9 @5 O9 M background: #FFF;8 X4 U( r n4 U5 p _6 J color: #000080;5 T5 H0 S! u, w- X/ F+ F4 _ }0 s0 J/ |$ W2 `! `2 ~: B 1 l7 D/ \0 V8 ]) } .nav_left .nav_left_items.active::before {" @4 z% N+ W3 C$ f display: inline-block;; a. w0 K' r* }5 U1 E! @' ~ width: 6rpx; ; Z+ r9 Y5 q/ }# O height: 60rpx; - P- `1 ^" ]0 _, `. @$ R2 b' v8 c background: #000080; 0 P. s) v* z: ]# ]( L; X content: ;8 Z, g& y: _1 z& n8 v position: absolute;3 h$ ~: X, z+ T) u. @% s top: 20rpx; $ m7 E7 F/ B4 l: O7 S! \& E left: 0;5 J0 i. ?! c: X3 K& t% u }, S/ n$ A8 h: `, U5 G4 |6 F # \" z+ p5 m3 {5 e R9 @& f( h- u .nav_right {. Z1 \* H$ g1 Z4 L2 w4 s position: absolute;" h/ R1 r8 O& ~6 r top: 0;; S' u# O M8 U0 e( F* F6 X right: 0;- K9 @# _% O: H/ p width: 75%;! b, o* p, Z; T9 e height: 100%; 0 a& v0 {6 s7 Q- h ]8 E& r }7 m1 g! |, v" D . q, O, o7 }- [9 E8 F .nav_right .nav_right_items { ; Z3 y! U$ P& C8 E: q float: left; ( D4 q8 X% E) b1 q5 W) K* t width: 33.33%; $ J4 \( Y2 W. M0 {: f) b8 T text-align: center;% B! [. ]! Q: a padding: 30rpx 0;& }9 f8 }' ]& V& @% k }; Q0 {7 @; b8 I$ t! o( h3 C , e7 P, f! [3 Z2 [ .nav_right .nav_right_items image {9 C7 J' R9 n5 h t width: 120rpx;$ i/ v# k1 c/ B0 Q$ B* d6 R height: 160rpx;3 O9 t; g. c- A5 h4 X. S7 l }5 Q+ s) \7 ]" a O* o% t$ E1 H- \5 V/ { .nav_right .nav_right_items text { 3 d% C& z- Q4 R# ^5 ? display: block; : D2 }/ u1 p! X2 f' E+ ? margin-top: 20rpx; & r7 ]& h( f) a font-size: 28rpx; 0 w; A) Z5 v3 D, d2 [: q; @ overflow: hidden;; \5 a9 g. k! n0 ^; p white-space: nowrap;0 j) O' E/ }1 Y1 U( [ text-overflow: ellipsis; ], w8 n p( z }" x1 b3 T7 _$ ]5 f& D * s+ I9 A. f# K+ q* m .nocate {. l' W+ q% B0 k/ i0 k; m- R padding: 100rpx;+ x5 J5 O* _3 w( E! {, q' h2 G6 H text-align: center; ) p3 c" |0 P9 Z% g# F W# \ } * v T" U* B o! T4 N% T7 i* e6 { P0 ^3 F) J* K$ d .nocate image {" H- s% c9 ~/ ` width: 70rpx;1 `, ]7 H0 L7 x height: 70rpx;* `+ Z" a; {- {! o }# y* F: \+ o7 s4 B+ P % F& e! q, h( w& w .nocate text { 0 B. F1 I* {7 B& ~# b- _/ e font-size: 28rpx;9 g& P$ X' W+ b+ d! b display: block; k) y9 D$ e' o6 M8 u5 {8 Z color: #BBB; / A8 n! h# f" k+ {6 a! d } ( _' F! @% Y9 S ] + H4 s- @( S; F5 h /*隐藏滚动条*/ & \- x# m! G0 H1 [+ M' d0 ` ::-webkit-scrollbar { ' V9 X" @9 L- T1 _# {( Z" v width: 0;3 B. S. D/ b ? height: 0; ! c6 Y( [# k$ N) h# |' U, }# Z color: transparent;5 D9 m" Y9 h. ?/ g } ; `' A U& y$ ?" J3 E U' r' t4 F& C' k( y7 K* ~ .topx { . H6 w$ J. K7 ~+ ^ width: 90%; R# r: A( g7 @, k7 ] /* height: 700rpx; */ * {7 v, i; z V margin: 30rpx auto;5 W W9 W: W8 n7 { z-index: 1; # t: l. N: P) w4 X" o border-radius: 10rpx; 0 X1 M* B+ a; q background-size: cover; : t: h1 |! a5 `# E( s* o }

4-3,js实现分类逻辑const db = wx.cloud.database()" K* t6 j# h. Q0 `5 l const $ = db.command.aggregate. W) b; Y0 g7 k5 f; D. K: A Page({ + w+ P6 Q2 A5 e5 |1 l5 H0 A. ~" m3 ?7 Q data: { ' o' c. G/ Z3 W$ A tabs: [],+ b. {, p% J @3 c b9 Y$ Q tabCur: 0, //默认选中 : ^3 R4 @1 e1 \9 g lefts: [], : }( X! N* R0 ?! {+ u, m2 ` leftCur: 0,* {7 [: @+ p) S1 q rights: [],' N" c" |1 _. u: _5 h & i$ M& z9 @2 e2 m3 S- E! m" o },, }& D, S2 {: _3 T# s onLoad: function (options) {0 W# d# {* h, q2 b- ~# i db.collection(demo).aggregate()& }/ h2 U7 a- H$ I! c' d .group({ 2 z2 X1 e7 }" H9 E. G1 q _id: $louhao# ?3 R/ W8 D8 q E }) " N5 k$ |8 V! \' ], U .end() 9 K, ?/ g# w1 J: K& g+ U& N .then(res => { 0 t: Y- E8 v7 \8 o7 L console.log(楼号列表, res) + l# u/ z4 f3 q3 }2 g this.setData({7 H1 p1 M" d9 N9 k/ W- T# D: D tabs: res.list$ O& B1 l! s' c V4 G5 g })# s( D, {: m* j1 p& @0 T this.sushehao(res.list[0]._id) 3 w9 S7 m7 Y* M& D' Z }) r! ^) H, X: o7 q },# P; ?1 P, y7 V+ B1 [/ m: F0 [ //加载当前楼号所有的宿舍号8 j4 a9 V# z) n E8 v sushehao() { 3 {7 n& I5 a, n( _ let louhao = this.data.tabs[this.data.tabCur]._id1 N/ L2 _/ N5 ~& f+ T" _6 D/ v: J& m db.collection(demo).aggregate() 5 V+ h* [+ n: r) y- ] .match({ 6 N0 D8 |- b2 {0 ?0 q/ h. ` louhao, T* G5 r% U/ T5 V" e+ u' J8 Z/ c }) K; q/ ?& ~9 ]0 A2 a G8 ` .group({ - s o$ ^" N: `7 Z# j _id: $sushe 1 w" s& i5 w3 N' s }) ( l- ]; ?$ T; m0 H .sort({& T' N$ A0 A: B2 I/ O4 N sushe: -1 //宿舍号升序排列4 [$ @5 a' W* X# J7 r' q }) ) `9 `4 Y! j9 o% x .end() - x1 g7 m* Q2 b# q8 c .then(res => { : Q5 ~+ W& ], i5 f5 K, v2 s7 C console.log(louhao + 宿舍号列表, res)! b8 J; j5 p9 I this.setData({ ; ]9 l' `5 Z" ?! K/ I lefts: res.list1 D& [) |* \ q0 ^6 }) Y* o })4 i7 ]( Z& R5 ]. j this.xuesheng()7 u8 Y) z6 Y; D* f* E })) p- B- V. W# H },# o( F! S) Q( I2 } //加载当前宿舍号里所有的学生. v1 I' \ W6 w% j/ U S0 u5 m xuesheng() {, u7 O# ?8 x1 Z" D let louhao = this.data.tabs[this.data.tabCur]._id 6 s5 ?: H! V, ^# L, D' B let sushe = this.data.lefts[this.data.leftCur]._id * N4 ~) C+ z! I& w$ _% ~ db.collection(demo)+ K4 `6 Y7 T# |" X& L+ h .where({' o/ N3 f; h, e! H" ` louhao,- R7 e' Y" ?' x3 ]0 t0 S1 Z sushe6 `# k4 i8 K3 ` }).get() 5 W3 O9 G5 [! U$ I .then(res => {5 B: [& t/ @" ^" h# m3 W' s/ u0 C console.log(louhao + sushe + 室学生列表, res)# f& E% D0 O0 M% w% F o this.setData({ 6 u6 g, {1 R$ @+ H( L: Y. t rights: res.data# S9 E \6 }8 {8 u2 o4 R9 p5 p0 M }) / }5 R( I1 J$ S9 m. A& n$ [0 v }) & _' E$ b: R- [; n* T+ G( x },- e4 T: T2 u! A A //顶部选择分类条目 4 E: L/ X* K4 w% k6 S5 N tabSelect(e) { 7 p% q' o5 u: N/ k; q1 b this.setData({! @# w2 F0 x7 J$ V/ x( I( y tabCur: e.currentTarget.dataset.id,+ \9 p( T. g- w f) W scrollLeft: (e.currentTarget.dataset.id - 2) * 2001 Y+ f$ y9 @% m }, success => { ) ~; y' `; h( W3 m this.sushehao()( W4 d+ H/ b! ?) g" V- k/ B; | })- E& _5 A9 w. b# j9 g( ~ }, " d( z: u. d5 D3 [ //左侧条目选择& b* i9 x6 X. b- K' C& l switchLeftTab(e) { & y: v& I" v+ \* W let index = e.target.dataset.index;3 T, A4 k$ [7 `# z. w this.setData({ 4 p. ^" i7 @" G0 ]! r0 F' @* g' W leftCur: index,) @# r6 d' r o7 a. t" G }, success => {/ \$ a u# W* ?0 { this.xuesheng() 3 G+ @( @' N* R9 P) r/ t9 P7 O })( q' j; u9 k+ d/ t. [+ Q }, / W7 b8 N! }* m6 e7 p P/ W: ^! Y })

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

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