微信小程序scroll-view实现自定义滚动条
作者:let_me_shy荭
这篇文章主要为大家详细介绍了微信小程序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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。