微信小程序scroll-view怎么实现自定义滚动条

本篇内容主要讲解“微信小程序scroll-view怎么实现自定义滚动条”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序scroll-view怎么实现自定义滚动条”吧!

html

<!-- 九宫格 -->  <scroll-view class="my-grid" scroll-x="true" bindscroll="getleft">    <view class="grid-item" wx:for="{{gridlist}}" wx:key="index">       <text>{{item.name}}</text>    </view>  </scroll-view>  <!--滚动条部分-->  <view class="slide">    <view class='slide-bar' >      <view class="slide-show" ></view>    </view></view>

js

Page({  data: {    slideWidth:'',//滑块宽    slideLeft:0 ,//滑块位置    slideRatio:'',    windowWidth:'',    gridlist:[      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},      {name:'家乐福'},    ]  },  onLoad: function() {    var self = this ;    var systemInfo = wx.getSystemInfoSync() ;    self.setData({      windowWidth:systemInfo.windowWidth    });    self.getRatio();  },  //根据分类获取比例  getRatio(){    var self = this ;    var _totalLength = self.data.gridlist.length * 150; //分类列表总长度    var _ratio = 230 / _totalLength * (750 / this.data.windowWidth); //滚动列表长度与滑条长度比例    var _showLength = 750 / _totalLength * 230; //当前显示红色滑条的长度(保留两位小数)    console.log(_totalLength,_ratio,_showLength)    this.setData({      slideWidth: _showLength,      totalLength: _totalLength,      slideRatio:_ratio    })  } ,  getleft:function(e){    this.setData({      slideLeft: e.detail.scrollLeft * this.data.slideRatio    })  },})

CSS

.my-grid{  width: 100%;  height: 220rpx;  background-color: #00bfff;  white-space: nowrap;}.my-grid .grid-item{  width:150rpx;  text-align:center;  display:inline-block;  height:115rpx;}.slide{  height:30rpx;  background:#fff;  width: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;}

到此，相信大家对“微信小程序scroll-view怎么实现自定义滚动条”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！