微信小程序scroll-view仿拼多多横向滑动滚动条

<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>

//获取应用实例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  }) } })

.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;}