vue系列教程之微商城项目|分类

描述

本文需要实现的页面如下，点击左侧导航栏按钮，右侧自动滑动到对应位置。当滑动右侧内容，左侧导航栏也要做出相应变动。

准备工作

下载better-scroll

cnpm install better-scroll -S

引入vant-ui的侧边导航栏组件

main.js中新增以下代码

静态布局

顶部导航栏引入

fenlei.vue

引入侧边导航栏

结构大致如下，需要content-style占满屏幕中剩余的空间，也就是除去顶部和底部导航栏的空间.

fenlei.vue

请求数据

network/request.js中追加以下内容

在fenlei.vue中引入请求函数，并在created函数中请求数据，保存到goods属性中.

请求数据(res.data)结构如下

name为分类名称，需要放入侧边导航栏。sub为该分类对应的商品分类列表.

遍历goods数组，将每个元素的name放入侧边导航栏的元素中 fenlei.vue

</div>

右侧商品分类列表

借助在主页中使用过的vant-ui的宫格布局快速实现相应布局和样式.

这样就完成了相应的静态布局，但无法实现内容滚动效果。如果将overflow:hidden;属性取消，多出的内容就会溢出屏幕.

内容滚动

需要内容滚动的区域有左侧导航栏和右侧商品分类列表，需要分开处理。

1.给content-lefr和content-right添加ref，方便获取该元素.

2.通过ref获取content-left和content-right元素，将其初始化为better-scroll滚动模块.

需要注意的是：better-scroll必须要在需要滚动的内容元素渲染完成之后再初始化，否则无法正常使用.

在该页面中，需要等待content-left内的导航栏和content-right中的商品分类列表，渲染完毕之后再进行better-scroll的初始化.

那我们如何确保这两部分的内容已经渲染完毕呢？

一般的方法是，再请求到goods后，页面会自动进行动态更新，因为数据已经进行了双向绑定，而我们可以等待个一两秒之后再进行初始化.

但这样做显然不是很友好，如果用户网速快，那么就需要多等待一段时间才能正常使用页面，如果用户网速比较慢，那仍然无法保证此时页面元素已经渲染完成。

所以更好的方式是通过this.$nextTick()函数，该函数可以确保在当前正在渲染的元素渲染完毕之后再执行其中的代码。

但这样做better-scroll可能仍然无法正常运行，因为页面渲染是迟与js代码的，this.goods=res.data执行完之后，页面中很有可能还有其他元素在渲染，那this.$nextTick就会等待这些元素渲染完，而不是等待goods相关的元素渲染完成之后再执行.

为了确保是在goods相关的元素渲染完之后再执行this.nextTick，需要借助watch来完成,通过watch监听goods数据的变化和页面渲染，确保this.nextTick是在goods相关的元素渲染完之后执行.

初始化better-scroll的代码封装到methods的initScroll函数中，因为后面会多次对better-scroll进行初始化.

滚动联动

介绍

better-scroll提供了快速制作索引列表的模块，它将滚动容器中的父元素视为列表，把该父元素中的子元素视为列表项，通过给定对应的列表项下标，即可滚动到对应的子元素.

使用方法

在better-scroll初始化时给定wheel对象.

while对象的属性介绍

selectedIndex：默认显示滚动内容中的第几个子元素

wheelWrapperClass：需要绑定的父元素的类名，一般是better-scroll中的根元素

wheelItemClass：需要绑定的子元素的类名

this.scroll2.on('scrollEnd'，()=>{}):滚动结束后触发

可以通过this.scroll2.getSelectedIndex()获取当前显示的子元素的索引.

联动思路

通过监听'scrollEnd'事件，获取当前显示的子元素的索引，奖其赋值给this.activeKey，因为this.activeKey与左侧导航栏动态绑定，这样就完成了滚动右侧内容，左侧导航栏随之变化的效果。通过vant-ui文档可知，当前选中的导航栏元素下标与this.activeKey动态绑定，再通过组件的@change监听导航栏点击事件，每次点击重新初始化右侧的better-scroll对象，将this.activeKey赋值给wheel中的selectedIndex属性，就完成了点击左侧导航按钮，右侧自动滚动到对应内容.完整代码如下

fenlei.vue

注意事项

1.better-scroll对象必须在dom元素渲染完之后再进行初始化，否则无法正常使用.

2.better-scroll对象必须有固定的高度.

本篇文章是该系列文章中的第九篇，讲述的是导航栏组件封装的相关操作步骤。下篇系列文章之导航栏与页面绑定正在制作之中，各位粉丝敬请期待。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）