微信小程序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" 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; }

推荐阅读