小程序scrollview自定义横向滚动条

小程序里的`scroll-view`组件默认并没有提供自定义的横向滚动条样式，但是你可以通过CSS样式和一些技巧来模拟实现这个效果。以下是一种常见的做法：

1. 首先，在`<scroll-view>`标签外添加一个透明的`swiper`容器，并设置宽度等于`scroll-view`的实际宽度。

<view class="swiper-container">
   <scroll-view class="scroll-view-custom" scroll-x="{{scrollX}}" style="width: {{scrollWidth}}rpx;">
      ...你的内容...
   </scroll-view>
</view>

2. 然后，为`.swiper-container`创建一个伪元素，并给它设置背景色、高度和位置，使其看起来像滚动条。

.swiper-container::after {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 4px; /* 滚动条宽度 */
   background-color: #ccc; /* 自定义颜色 */
}

3. 当`scroll-view`的内容改变宽度（例如设置了新的滚动条位置）时，动态计算`.swiper-container`的宽度，并更新滚动条的位置。

Page({
   data: {
     scrollX: 0,
     scrollWidth: 'auto', // 初始时设为自动，待获取真实宽度后再更新
   },
   onLoad: function() {
     this.updateScrollbar();
   },
   onReady: function() {
     // 获取scroll-view实际宽度并更新数据
     this.setData({ scrollWidth: this.selectComponent('#scroll-view-custom').scrollWidth });
     wx.createSelectorQuery()
       .select('#scroll-view-custom')
       .fields({
         node: true,
       })
       .exec((res) => {
         if (res[0]) {
           this.updateScrollbar(res[0].node.offsetWidth);
         }
       });
   },
   updateScrollbar: function(width) {
     let scrollbarWidth = 4; // 滚动条宽度
     this.setData({
       scrollWidth: `${width + scrollbarWidth}px`, // 更新滚动条宽度
     });
   },
   onScroll: function(e) {
     this.setData({
       scrollX: e.detail.x
     });
   },
})