如何使用小程序自定义scroll-view滚动条

小编给大家分享一下如何使用小程序自定义scroll-view滚动条，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

小程序自定义 scroll-view 滚动条

效果图

wxml代码

 <scroll-view scroll-x   class="scroll-view"   bindscroll="bindScroll"> <block wx:for="{{arr}}" wx:key="index"> <view class="scroll-item">scroll-view{{index}}</view>  </block> </scroll-view>  <!-- 滚动条 --> <view class="slide"> <view class='slide-bar'> <view class="slide-action"   > </view> </view> </view>

wxss代码

 page{ height: 100vh; background: rgb(111, 80, 65) } .scroll-view{ display: flex; width: 100%; white-space: nowrap; padding-top: 20rpx; }  .scroll-item:nth-child(1){ margin-left: 40rpx; }  .scroll-item { display: inline-block; width: 550rpx; height: 463rpx; background: rgba(199, 180, 165); border-radius: 20rpx; margin-right: 30rpx; color: #fff; }  .slide{ background:rgb(111, 80, 65); width:100%; padding-top:20rpx; } .slide .slide-bar{ width:180rpx; margin:0 auto; height: 4rpx; background: rgba(255,255,255,.2); }  .slide .slide-bar .slide-action{ height:100%; background:#fff; }

js代码

  data: { arr: 10, slideWidth: '', slideLeft: '' },  onLoad: function (options) { // 计算比例 this.calcRatio(); },  calcRatio() { var windowWidth = wx.getSystemInfoSync().windowWidth; // 计算列表总长度 var totalLength = (this.data.arr * 580) + 40; // 计算滑块的比例 var slideRatio = 180 / totalLength * (750 / windowWidth);  var sliderWidth = 750 / totalLength * 180; this.setData({ slideWidth: sliderWidth, totalLength: totalLength, slideRatio: slideRatio }) },  bindScroll(e) { this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) },

附：scroll-view可滚动视图区域

以上是“如何使用小程序自定义scroll-view滚动条”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！