微信小程序滑动导航，可以自然的滑动位置

效果图

css

.swiper-nav{">#fff;white-space: nowrap}

.swiper-nav .item-nav{position: relative;padding: 30rpx 32rpx;color: #666666;font-size: 30rpx;cursor: pointer;display: inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);}

.swiper-nav .active{color: #666666}

 

 

html

<scroll-view scroll-x class='swiper-nav' scroll-left='{{swiperNav.x}}' scroll-with-animation='true' bindtap='swiperNav'>

　<view wx:for='{{swiperNav.arr}}' data-id="{{item.id}}" wx:key='{{index}}' class='item-nav {{swiperNav.i==index ? "active" : ""}}' data-i='{{index}}'>{{item.name}}

<view data-i='{{index}}' class='{{swiperNav.i==index ? "biankuang" : ""}}'></view>

</view>

</scroll-view>

 

js

data{　　

swiperNav: {

　　i: 0,

　　arr: [

　　　{ v: 0, txt: "推荐" },

　　　{ v: 1, txt: "浪漫" },

　　　{ v: 2, txt: "逗趣" },

　　　{ v: 3, txt: "舒缓" },

　　　{ v: 4, txt: "愉悦" },

　　　{ v: 5, txt: "新年" },

　　]

　}

}

 

swiperNav: function (e) {

　console.log(e);

　this.setData({

　　'swiperNav.i': e.target.dataset.i

　})

},

 

swiperNav: function (e) {

　console.log(e);

　/*获取可视窗口宽度*/

　var w = wx.getSystemInfoSync().windowWidth;

　var leng = this.data.swiperNav.arr.length;

　var i = e.target.dataset.i;

var type_id = e.target.dataset.id

　var disX = (i - 1) * w / leng;

　if (i != this.data.swiperNav.i) {

　　this.setData({

　　　'swiperNav.i': i

　　})

　}

　this.setData({

　　'swiperNav.x': disX,

type_id: type_id

　})

this.list()

},