导航：横向导航 竖向导航 在很多业务场景中都会用到，那今天我们今天基于微信小程序平台，分析下导航的制作处理
先看例子
平台都是大家常用的平台
导航需要手动滑动切换，小程序的操作流程度只能说优与 浏览器，还是比不上native，有时候滑动出现卡顿，最可怕的是出现滚动条，顿时会觉得有点 low
言归正传，直接看demo
利用 scroll-view 监听更新 滚动条的位置，让选中模块自动滚动进入视图，同时开启scroll-with-animation达到缓动的动画效果
wxml
<scroll-view class="navBar-box" scroll-x="true"
scroll-with-animation="true" scroll-left="{{scrollL}}">
<view class="cate-item {{curIndex == index ? 'active':''}}"
wx:for="{{category}}" wx:key="{{item.id}}" data-id="{{item.id}}"
data-index="{{index}}" bindtap="switchCategory">
{{item.name}}
</view>
</scroll-view>
复制代码数据解释：
scrollL滚动条滚动位置，用于更新滚去距离，达到导航模块 视图进入视口curIndex当前选中的导航子类，用于定位当前模块的active样式区分category导航子类数组，遍历展示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;
}
复制代码