效果图 
实现代码
index.wxml
<scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}" scroll-left=‘0‘ bindscroll="getleft">
<!--内容区域-->
<view>
<view class="navigator_second" wx:for="{{tlist[currentTab].secondList}}" wx:for-item="childItem" bindtap="getProductList" data-id="{{childItem.id}}">
<image class="navigator_icon" src="{{childItem.icon}}"></image>
<text class="navigator_text">{{childItem.name}}</text>
</view>
</view>
<view wx:if="{{tlist[currentTab].thirdList}}">
<view class="navigator_second" wx:for="{{tlist[currentTab].thirdList}}" wx:for-item="childItem" data-id="{{childItem.id}}" bindtap="getProductList">
<image class="navigator_icon" src="{{childItem.icon}}" ></image>
<text class="navigator_text">{{childItem.name}}</text>
</view>
</view>
</scroll-view >
<!--滚动条部分-->
<view wx:if="{{slideShow}}" class="slide">
<view class=‘slide-bar‘ >
<view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+‘rpx‘}};"></view>
</view>
</view>index.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
.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;
}
http://blog.csdn.net/hanxue_tyc/article/details/78674075