导航：横向导航 竖向导航 在很多业务场景中都会用到，那今天我们今天基于微信小程序平台，分析下导航的制作处理

先看例子

平台都是大家常用的平台

导航需要手动滑动切换，小程序的操作流程度只能说优与 浏览器，还是比不上native，有时候滑动出现卡顿，最可怕的是出现滚动条，顿时会觉得有点 low

言归正传，直接看demo

利用 scroll-view 监听更新 滚动条的位置，让选中模块自动滚动进入视图，同时开启scroll-with-animation达到缓动的动画效果

wxml

        
     
              {
   {item.name}}    
     
    复制代码

数据解释：

1. scrollL滚动条滚动位置，用于更新滚去距离，达到导航模块 视图进入视口
2. curIndex 当前选中的导航子类，用于定位当前模块的active样式区分
3. category 导航子类数组，遍历展示
4. switchCategory 捕获点击导航子类的位置等相关信息

data 数据

data: {    title: 'NavBar',    curIndex:0,  // 当前选中的索引值    category:[  // 导航集合数据信息        {            name:'推荐',            id:1,        },        ******    ],    wWidth: 0, // 视口宽度    wHeight:0, // 视口高度    scrollL: 0, // 导航滚动的数值},复制代码

初始化 获取视口信息

show(){    let wData = wx.getSystemInfoSync();    this.setData({         wWidth:wData.windowWidth,        wHeight:wData.windowHeight,    })  },复制代码

即时捕获更新导航位置

switchCategory:function(e){    let idx = e.currentTarget.dataset.index; // 获取点击元素的索引    this.setData({curIndex:idx})     let offsetL = e.target.offsetLeft; // 点击的item距离适口view左边界距离    /**     * 获取点击元素距离中心的偏移量     * 滚动距离 = 偏移数值 - 视口／2 (稍微增加一些元素的中间数值)     */    let scrollL = offsetL - this.data.wWidth/2 + 20;    scrollL = scrollL > 0 ? scrollL : 0;    this.setData({ scrollL:scrollL }) },复制代码

具体偏移数据目前还不能达到一个自动化计算的程度，当然可以按照当前item中的 (字数 * 字体大小 + 左右偏移)/2 达到一个准确的数据，使得 导航选中的子类如有条件居中时，更加准确

ps: 隐藏滚动条

::-webkit-scrollbar{  width: 0;  height: 0;  color: transparent;}复制代码

开启弹性滚动

page{    -webkit-overflow-scrolling: touch;    }复制代码

一开始说到竖直滚动条，实现方式跟横向雷同，没有什么特殊，反而不需要考虑 item 自我宽度的居中

如有任何问题，请留言，会及时更正，谢谢

源码地址：

如果喜欢给个start，哈哈hahahahahahahah