微信小程序 navbar

背景：navbar在小程序中的出镜率是很高的，哦应该说是在移动应用中。那么我们怎么去做一个navbar 这里我们当然可以使用微信小程序提供的weUI组件，本身就自带的。如果item较少使用体验上是妥妥的，但是item增多了就变成下面这个鬼样子了。好了咱自己来弄一个好了。

---

wxml布局：

<view class="contain">
  <scroll-view scroll-x class="itemscroll" 
  scroll-into-view="{{targetview}}" scroll-with-animation='true'>
    <view wx:for="{{items}}" wx:for-item="itemname" class='itemcontain' wx:key="*this">
      <view id="item{{index}}" bindtap="itemClick" class="item {{currentIndex==index?'active_txt':''}}">
        <text>{{itemname}}</text>
        <view class="bottomline {{currentIndex==index?'active':''}}"></view>
      </view>
    </view>
  </scroll-view>
<!--swiper组件-->
  <swiper current='{{page_index}}' bindchange='page_change' skip-hidden-item-layout='true' easing-function='linear'>
    <swiper-item >itemone</swiper-item>
    <swiper-item>itemtwo</swiper-item>
    <swiper-item >itemtree</swiper-item>
    <swiper-item>itemfour</swiper-item>
    <swiper-item >itemfive</swiper-item>
    <swiper-item>itemsix</swiper-item>
    <swiper-item>itemseven</swiper-item>
    <swiper-item>itemeight</swiper-item>
    <swiper-item>itemnine</swiper-item>
    <swiper-item>itemten</swiper-item>
  </swiper>
</view>

wxss样式表文件：

.page{
  width: 100%;
  height: 100%;
}
.contain{
  width: 100%;
  height: 100%;
}
.itemscroll{
  height:80rpx;
  white-space:nowrap;
  display:flex;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.item{
  font-size: 12pt;
}
.itemcontain{
  display:inline-block;
  border-left: 1rpx #ccc solid;
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.bottomline{
  width: 100%;
  margin-top: 10rpx;
  height: 5rpx;
}
.active{
  background-color: #fa0;
  color: white
}
.active_txt{
  color: #fa0
}

js文件

var sliderWidth = 96
Page({

  /**
   * 页面的初始数据
   */
  data: {
    windowwidth:375,
    currentIndex:0,
    page_index:0,
    items:["itemone","itemtow","itemtree","itemfour","itemfive","itemsix","itemseven","itemeight","itemnine","itemten"],
    sliderLeft:0,
    sliderOffset:0,
    targetview:""
  },
  /**
   * itemtab点击事件
   * 
  */
  itemClick:function(options){
    var index =  options.currentTarget.id
    var index = index.substr(4)
    this.setData({
      currentIndex:index,
      page_index:index,
      targetview: "item" + index
    })
  },
  /**
   * swiper奇幻事件
   * 
  */
  page_change:function(options){
    var type = options.detail.source;
    if(type === 'touch'){
        this.setData({
          currentIndex:options.detail.current,
          targetview:"item"+options.detail.current
        })
        console.log(this.data.targetview)
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
       that.setData({
         windowwidth:res.windowWidth,
          sliderLeft: (res.windowWidth / that.data.items.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.items.length * that.data.activeIndex
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

---

效果图：