微信小程序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怎么实现自定义滚动条”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！