微信小程序中如何自定义scroll-view滚动条样式？

本文共计552个文字，预计阅读时间需要3分钟。

原文：本文实例为大家分享了微信小程序scroll-view实现自定义滚动条的具体代码，供大家参考，具体内容如下++!--+九宫格+--%C2%A0+scroll-view+class%3D%22my-grid%22+scroll-x%3D%22true%22+bindscroll%3D%22getleft%22+C2%A0+C2%A0+view+class%3D%E2%80%9D

本文以微信小程序scroll-view组件实现自定义滚动条为例，提供代码参考。具体代码如下：++!--+九宫格+--%C2%A0+scroll-view+class%3D%22my-grid%22+scroll-x%3D%22true%22+bindscroll%3D%22getleft%22+C2%A0+C2%A0+view+class%3D%E2%80%9D

本文实例为大家分享了微信小程序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" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></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; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。