效果圖
css
.swiper-nav{"backkground:#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}
.biankuang{
width:50rpx;
height:8rpx;
background: #0087F2;
margin: 0 auto;
border-radius: 20rpx;
}
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()
},