小程序 之navbar横向滚动 收藏防迷路

欧清辣哨

一、效果图

二、代码

[url=][/url]
var app = getApp(),  _thisPage({  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      })    }  }})[url=][/url]

[url=][/url]
<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>[url=][/url]

[url=][/url]
.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;}

三叶草

排版有些乱呀