滑轨上面是九宫格,可滑动,九宫格用scroll-view包裹里面 x轴滑动
滑轨代码:
wxml
<view class="track-wrap posRe">
<view class="active_track" style="left:{{ trackScrollWidth }}rpx"></view>
<view class="bg_track" ></view>
</view>
/* 九宫格滑轨 */
.track-wrap{
display: relative;
margin: 0 auto;
width: 80rpx;
height: 6rpx;
border-radius: 6rpx;
}
.bg_track{
position: absolute;
top: 0;
left: 0;
width: 80rpx;
height: 6rpx;
background: #DBDBDB;
border-radius: 6rpx;
}
.active_track{
position: absolute;
top: 0;
width: 66rpx;
height: 6rpx;
background: #006F5D;
border-radius: 6rpx;
z-index: 1;
}
js:滑动九宫格,触发scroll
canScrollWidth:滑轨宽度-高亮宽度 80-66=14
// 菜单九宫格滑轨
menuScroll(e){
const { scrollLeft } = e.detail
const canScrollWidth = 14 //可滑动的距离 rpx
const moveLeft = Math.floor(scrollLeft/canScrollWidth)
this.setData({
trackScrollWidth:moveLeft
})
},