--- theme: hydrogen --- 分类数据的左右联动是商城类app\小程序的常见使用的模式，如下图oppo商城所示： ![1638839492684.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f73c2dcc39a441cc83e0c23e3fe14977~tplv-k3u1fbpfcp-watermark.image?) 左边的一级菜单栏跟随着右边分类的数据同步滑动，右边的分类数据也会跟着左边的分类滑动展现。使用到的核心组件有 [scroll-view](https://uniapp.dcloud.io/component/scroll-view?id=scroll-view)、使用的api有 [uni.createSelectorQuery()](https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery)、以及[async\await](http://www.ruanyifeng.com/blog/2015/05/async.html)语法。完成的效果展示： ![1638840954042.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c9909b36dd04d0b80d19d7223c3089d~tplv-k3u1fbpfcp-watermark.image?) ### 步骤一分类页面的布局和样式这一步比较简单，所以不详细展开讲了。需要注意的是，为了隐藏滑动出现的滚动条，我们需要在app.vue中声明以下的样式,在其他页面中声明不生效： ```js ``` ```js ``` ![微信截图_20211207102032.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90ffad58949c4759b82b3d82277f52dc~tplv-k3u1fbpfcp-watermark.image?) ### 步骤二在页面渲染完成后，计算出右边的分类数据的每一项距离顶部的距离获取右边数据每个item到顶部的距离后放入数组中，数组的第一个元素为0。注意，我们需要在onReady生命周期内调用它。 ```js onReady() { this.getCateItemTop() }, methods: { getCateItemTop() { let query = uni.createSelectorQuery(); query.selectAll('.category-right-item').boundingClientRect((rects) => { rects.forEach((rect) => { this.rightScrollArr.push(rect.top - rects[0].top) }) }).exec(function() { }) }, } ``` ### 步骤三给左边的分类增加点击事件switchCate 这里使用了async\await语法，目的使switchCate成为异步函数，将函数中的getCateItemTop方法移出js任务执行队列而不影响后面的代码的执行。 ```js async switchCate(index) { if (!this.rightScrollArr.length == 0) { await this.getCateItemTop(); } if (index === this.current) return; //将右边的scroll高度重设 this.scrollRightTop = this.rightScrollArr[index]; this.cateDataStatus(index); }, //设置左边分类的滚动状态 cateDataStatus(index) { //当前选择的项 this.current = index; // 如果为0，意味着尚未初始化，调用getElRect获取目标元素的高度 if (this.cateBarHeight == 0 || this.cateItemHeight == 0) { this.getElRect('.category-bar', 'cateBarHeight'); this.getElRect('.category-item', 'cateItemHeight'); } //将该项垂直居中，算法：左边scroll的scrollTop = 当前项的高度 - 分类栏的一半高度 this.scrollLeftTop = index * this.cateItemHeight + this.cateItemHeight / 2 - this.cateBarHeight / 2; }, //获取一个目标元素的高度 getElRect(elClass, dataVal) { const query = uni.createSelectorQuery(); query.select(elClass).fields({ size: true }, res => { this[dataVal] = res.height; }).exec(function() { }) }, ``` ### 步骤四给右边的滚动条添加滚动事件在右边的scroll-view组件上添加@scroll="rightScroll"，声明rightScroll方法 ```js async rightScroll(e) { if (this.rightScrollArr.length == 0) { await this.getCateItemTop(); } if (!this.cateBarHeight) { await this.getElRect('.category-bar', 'cateBarHeight') } // scrollHeight的值等于滚动位置加上左边栏的高度一半是为了始终拿的是中间显示的右边项做对比 let scrollHeight = e.detail.scrollTop + this.cateBarHeight / 2; for (let i = 0; i < this.rightScrollArr.length; i++) { let height1 = this.rightScrollArr[i]; let height2 = this.rightScrollArr[i + 1]; //如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可。 if (!height2 || scrollHeight >= height1 && scrollHeight < height2) { this.cateDataStatus(i) return; } } } ```