小程序 自动导航

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

先看例子

平台都是大家常用的平台

首先呢， 导航 确实方便了用户更快更准确的获取需求信息，使整个产品 有一个很清晰的 交互流程

导航需要手动滑动切换，小程序的操作流程度只能说优与 浏览器，还是比不上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>
复制代码

数据解释：

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 自我宽度的居中

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

源码地址：github

如果喜欢给个start，哈哈hahahahahahahah

转载于:https://juejin.im/post/5b347fba6fb9a00e80276f21