微信小程序scroll-view实现自定义滚动条_javascript技巧_

                {{item.name}}                              

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     })   }, })

/* 九宫格样式 */ .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; }