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