Hello大家好，很久没有更新了，最近都在忙一些其他事情，所以就鸽了很久；事情忙完了，回到小程序的更新中来了，之前我们说到了scroll-view可滑动组件，今天我们就使用他来实现一个可以滚动的导航栏，这个可以滚动的导航栏在很多APP中都可以看到，比如今日头条、皮皮虾、B站、斗鱼等直播APP太多太多了，只要涉及到多种分类的都可以使用滑动导航栏来进行实现。
话不多说，进入我们的代码环节。
1.首先我们定义数据源，index.js文件：
navScrollLeft 代表左边显示的位置，默认初始值是0
currentNav 代表当前选中下标，默认初始值是0
navData 导航栏数据源
data: {navScrollLeft:0,currentNav:0,navData:[{text:"推荐"},{text:"关注"},{text:"视频"},{text:"新闻"},{text:"动态"},{text:"看点"},{text:"好友"}]},
2.然后我们在index.wxml文件中注册我们的scroll-view组件：
<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}"><block wx:for="{{navData}}" wx:key="index"><view class="nav_item {{currentNav == index?'active':''}}" data-current="{{index}}" bindtap="switchNav">{{item.text}}</view></block></scroll-view>
3.这里来拆分说明一下各个参数的作用：
class=“nav” 设置导航栏的整体样式
scroll-x=“true” 设置为横向滚动
scroll-left="{{navScrollLeft}}" 设置左边显示的值，使用的是data里面的数据
wx:for="{{navData}}" wx:key=“index” 使用for循环遍历标题栏数组集合，key设置成index
class=“nav_item {{currentNav == index?‘active’:’’}}” nav_item设置导航栏item的样式 ，后面的这个就要说明一下了 currentNav == index?‘active’:’’ 当我们选中的下标等于index的时候设置active样式，否则不设置
data-current="{{index}}" item当前的index
bindtap=“switchNav” 绑定点击事件
4.实现点击事件
实现点击事件的时候我们首先要获取到当前点击的index，通过currentTarget获取。
然后设置选项卡居中，屏幕总宽度除以5
最后将点击的下标赋值给currentNav
switchNav:function(e){// console.log(e);//获取当前点击的indexvar cur = e.currentTarget.dataset.current;//tab选项居中 屏幕的宽度除以5var singleWidth = this.data.windowWidth/5;this.setData({//输出左边显示的位置navScrollLeft: (cur - 2)*singleWidth});console.log(this.data.navScrollLeft);//当我们点击的下标等于我们当前的下标时说明没有切换item进行点击，所以不做操作if(this.data.currentNav == cur) {return false;}else{//当我们点击的下标不等于我们当前的下标时，将我们点击获取到的新的下标赋值给currentNavthis.setData({currentNav: cur})}},
5.最后贴一下css样式
/* miniprogram/pages/index/index.wxss */.nav{height: 80rpx;width: 100%;position: fixed;top: 0;left: 0;z-index: 99;overflow: hidden;line-height: 80rpx;white-space: nowrap;font-size: 32rpx;margin-top: 50px;}.nav_item{display: inline-block;width: 20%;text-align: center;}.nav .active{color: red;}
我们来看一下效果：
可以看到默认状态下的currentNav是0，也就是显示我们第一个数据。
当我们点击动态的时候，动态会跳到(也就是左移到)屏幕中间：
到这里一个简单的滚动状态栏就实现了。
很简单~
