小程序导航栏与内容区上下联动的实现

前言

之所以把这个功能写出来，是经常看到小伙伴问类似的问题，在这里就详细讲解下整个实现过程，虽然没涉及到什么难点，但希望可以帮助到对这方面还有困惑的朋友。

使用框架及技术

mpvue官方文档

小程序官方文档

源码地址

https://gitee.com/roberthuang123/miniCase.git

实现步骤

顶部导航

使用小程序scroll-view组件实现顶部导航，注意设置两个属性：

• scroll-x
• scroll-left

通过事件switchNav(index)来改变currentTab，动态添加class名，当currentTab>3时将scrollLeft设为300px。

内容区

使用小程序swiper组件实现内容区可左右滚动，通过swiper的change事件获取currentTab值

通过读取设备可使用宽高计算出内容区高度：

单个内容区需要上下滚动，依然借助scroll-view组件，设置scroll-y属性实现。