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

让我来详细讲解一下“微信小程序scroll-view实现自定义滚动条”的完整攻略。

简介

在一些需要滑动的页面中，我们可能需要自定义滚动条的样式，以让页面更加美观。微信小程序中可以通过使用 scroll-view 组件并在其中嵌套一个自定义的滚动条实现。

实现方法

实现自定义滚动条的方法主要可以分为以下步骤：

1. 在 scroll-view 中添加一个自定义的滚动条
2. 监听 scroll-view 的滚动事件，更新自定义滚动条的位置
3. 监听自定义滚动条的拖动事件，滚动 scroll-view

下面我们具体来看如何实现。

1. 添加自定义滚动条

首先，我们需要在 scroll-view 中添加一个自定义的滚动条。可以通过添加一个 view 组件，设置其背景色并设定宽高，就可以模拟出一个滚动条了。滚动条的位置是相对 scroll-view 的而不是绝对位置，因此需要使用定位（position）来确定滚动条的位置。

下面是示例代码：

<scroll-view class="scroll-view" scroll-y="{{true}}" bindscroll="onScroll">
  <view class="content"></view>
  <view class="scroll-bar" style="height: {{scrollBarHeight}}px; top: {{scrollBarTop}}px;"></view>
</scroll-view>

其中，scroll-view 的 scroll-y 属性设置为 true，表示支持竖向滚动；bindscroll 属性指定 scroll-view 组件的滚动事件监听函数；content 是 scroll-view 中的内容，可以根据具体需求进行设置；scroll-bar 为自定义滚动条，高度动态计算。在 css 中，需要将 content 设置为定高定宽并设为绝对定位，scroll-bar 的背景色和宽高均需要设置，定位属性 position 设为 absolute。

.scroll-view {
  position: relative;
  height: 500rpx; /* 设置 scroll-view 的高度 */
}

.content {
  height: 1000rpx; /* 设置 scroll-view 中内容的高度 */
  width: 100%;
  position: absolute;
  top: 0;
}

.scroll-bar {
  position: absolute;
  right: 2rpx; /* 定义在滚动条父容器的右侧 */
  width: 4rpx;
  background-color: rgba(0, 0, 0, 0.3);
}

2. 监听滚动事件

接下来，我们需要监听 scroll-view 的滚动事件，以便更新滚动条的位置。通过计算 scroll-view 的滚动距离以及滚动区域的可滚动高度，可以得到滚动条的位置。需要注意的是，在 scroll-view 的滚动事件 bindscroll 中，scrollTop 表示滚动的距离。

下面是示例代码：

Page({
  data: {
    contentHeight: 1000, // content 的高度
    scrollBarHeight: 150, // scroll-bar 的高度
    scrollBarTop: 0 // scroll-bar 的距离顶部的位置
  },
  onScroll: function(event) {
    const scrollTop = event.detail.scrollTop;
    const scrollHeight = this.data.contentHeight - event.detail.scrollHeight;
    const scrollBarTop = scrollTop / scrollHeight * (this.data.contentHeight - this.data.scrollBarHeight);
    this.setData({
      scrollBarTop: scrollBarTop
    });
  }
})

其中，scrollBarTop 表示滚动条距顶部的距离。通过滚动距离与滚动区域的可滚动高度的比例，计算出滚动条位置即可。contentHeight 为 content 的高度，scrollBarHeight 为自定义滚动条的高度。需要注意的是，这里的宽高和定位应该与之前的相同，否则无法正常工作。

.scroll-bar {
  position: absolute;
  right: 2rpx;
  width: 4rpx;
  background-color: rgba(0, 0, 0, 0.3);
  height: {{scrollBarHeight}}px; /* 记得设置高度 */
  top: {{scrollBarTop}}px; /* 这里需要动态计算 */
}

3. 监听拖动事件

我们还需要监听自定义滚动条的拖动事件，以更新 scroll-view 的滚动位置。通过计算拖动距离与滚动条总长度的比例，可以得到 scroll-view 的滚动距离。

下面是示例代码：

Page({
  data: {
    contentHeight: 1000, // content 的高度
    scrollBarHeight: 150, // scroll-bar 的高度
    scrollBarTop: 0, // scroll-bar 的距离顶部的位置
    startY: 0, // 开始拖动时的 Y 坐标
    moveY: 0, // 拖动距离
    barMoveY: 0, // 滚动条拖动距离
    isTouch: false // 是否正在拖动
  },
  onTouchStart: function(event) {
    const startY = event.touches[0].clientY;
    this.setData({
      isTouch: true,
      startY: startY
    });
  },
  onTouchMove: function(event) {
    if (!this.data.isTouch) { return; }
    const scrollTop = event.currentTarget.offsetTop;
    const contentHeight = this.data.contentHeight;
    const scrollBarHeight = this.data.scrollBarHeight;
    const moveY = event.touches[0].clientY - this.data.startY;
    const barMoveY = moveY / (contentHeight / scrollBarHeight);
    const scrollMoveY = moveY / (contentHeight - scrollTop) * scrollTop;
    this.setData({
      moveY: moveY,
      barMoveY: barMoveY
    });
    wx.pageScrollTo({
      scrollTop: scrollTop + scrollMoveY
    });
  },
  onTouchEnd: function() {
    this.setData({
      isTouch: false,
      barMoveY: 0
    });
  }
})

其中，onTouchStart 监听滑动事件的开始，记录开始拖动时的 Y 坐标；onTouchMove 监听滑动事件的过程，计算拖动距离以及滚动条拖动距离，通过 wx.pageScrollTo 设置滚动距离，以实现滚动；onTouchEnd 监听滑动事件的结束，设置 barMoveY 和 isTouch 为 0 进行复位。需要注意的是，在 scroll-view 中，我们需要设置 disable-scroll 属性禁止其默认滚动事件。

最后，在模拟滚动条时还可以设置一些交互动画，比如拖动结束后逐渐消失的动画。

示例

这里提供两个完整的示例以供参考：

1. scroll-view 实现自定义滚动条示例一
2. scroll-view 实现自定义滚动条示例二