本文实例为大家分享了微信小程序横向滑动滚动条的具体代码，供大家参考，具体内容如下
效果图
实现代码
index.wxml
rush:xml;">
index.js
rush:js;">
//获取应用实例
var app = getApp();
Page({
data: {
navigate_type:'',//分类类型，是否包含二级分类
slideWidth:'',//滑块宽
slideLeft:0,//滑块位置
totalLength:'',//当前滚动列表总长
slideShow:false,slideRatio:''
},onLoad: function () {
var self = this ;
var systemInfo = wx.getSystemInfoSync() ;
self.setData({
list: _list,windowHeight: app.globalData.navigate_type == 1 ? systemInfo.windowHeight : systemInfo.windowHeight - 35,windowWidth: systemInfo.windowWidth,navigate_type: app.globalData.navigate_type
})
//计算比例
self.getRatio();
},//根据分类获取比例
getRatio(){
var self = this ;
if (!self.data.tlist[self.data.currentTab].secondList || self.data.tlist[self.data.currentTab].secondList.length<=5){
this.setData({
slideShow:false
})
}else{
var _totalLength = self.data.tlist[self.data.currentTab].secondList.length * 150; //分类列表总长度
var _ratio = 230 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例
var _showLength = 750 / _totalLength * 230; //当前显示红色滑条的长度(保留两位小数)
this.setData({
slideWidth: _showLength,totalLength: _totalLength,slideShow: true,slideRatio:_ratio
})
}
},//slideLeft动态变化
getleft(e){
this.setData({
slideLeft: e.detail.scrollLeft * this.data.slideRatio
})
}
})
index.wxss
rush:css;">
.scroll-view-x{
background-color: #fff;
white-space: Nowrap;
}
.navigator_second{
width:150rpx;
text-align:center;
display:inline-block;
height:115rpx;
}
.navigator_icon{
width:60rpx;
height:60rpx;
}
.navigator_text{
display:block;
width:100%;
font-size:24rpx
}
.slide{
height:30rpx;
background:#fff;
with:100%;
padding:14rpx 0 5rpx 0
}
.slide .slide-bar{
width:230rpx;
margin:0 auto;
height:1.5px;
background:#eee;
}
.slide .slide-bar .slide-show{
height:100%;
background-color:#ff6969;
}
项目地址：微信小程序横向滑动滚动条
