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

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

查看更多关于微信小程序scroll-view实现自定义滚动条的详细内容...