小程序 之navbar横向滚动

一、效果图

 

 二、代码

var app = getApp(),
  _this
Page({
  data: {
    navData: [{
      id: 0,
      cat_name: '全部'
    }, ],
    currentTab: 0,
    navScrollLeft: 0,
    lists: []
  },
  init() {
    isEnd = false, page = 1
    _this.setData({
      lists: []
    })
  },
  onLoad(options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
    _this = this;
    //获取所有的分类
    _this.getCategory()
  },
  getCategory() {
    app.util.request({
      showLoading: false,
      url: app.util.url('entry/wxapp/category'),
      success(res) {
        _this.setData({
          navData: _this.data.navData.concat(res.data.data)
        })
      },
    })
  },
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    //每个tab选项宽度占1/5
    var singleNavWidth = this.data.windowWidth / 5;
    //tab选项居中                            
    this.setData({
      navScrollLeft: (cur - 2) * singleNavWidth
    })
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  }
})

<scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
        <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
            <view class="nav-item {{currentTab == idx ?'active':''}}"  data-current="{{idx}}" bindtap="switchNav">{{navItem.cat_name}}</view>
        </block>        
</scroll-view>

.nav {
  height: 100rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 100rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;
}
.nav-item {
  width: 20%;
  display: inline-block;
  text-align: center;
  color: #333;
  overflow: hidden;
}
.nav-item.active{
  color: #09bb07;
}