uniapp实现列表自定义滚动条

您好，UniApp 中可以使用 `scroll-view` 组件来实现自定义滚动条。以下是一个简单的示例：

<scroll-view class="scroll-view" scroll-y>
  <div class="content">
    <!-- 列表内容 -->
  </div>
  <div class="scroll-bar"></div>
</scroll-view>

其中，`.scroll-view` 为 `scroll-view` 组件的样式类，`.content` 为列表内容的容器，`.scroll-bar` 为自定义滚动条的容器。

接着，在样式文件中可以添加以下代码：

.scroll-view {
  position: relative; /* 父容器需要设置 position: relative; */
  height: 100vh; /* 设置高度，这里使用了 viewport height 单位 */
}
.content {
  height: 2000rpx; /* 列表内容高度 */
}
.scroll-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 50px; /* 滚动条高度 */
  background-color: #ccc;
  border-radius: 3px;
  opacity: 0; /* 初始透明度为 0，只有在滚动时才显示 */
  transition: opacity 0.3s;
}
.scroll-view::-webkit-scrollbar {
  width: 0; /* 隐藏原生滚动条 */
}
.scroll-view::-webkit-scrollbar-thumb {
  width: 0;
  height: 0;
  background-color: transparent;
}

这里使用了 `position: absolute;` 和 `right: 0;` 将自定义滚动条定位到父容器的右侧，使用 `opacity` 和 `transition` 实现滚动条的渐隐渐现效果。同时，使用了 `-webkit-scrollbar` 相关样式将原生滚动条隐藏。

最后，在 `scroll-view` 组件的 `scroll` 事件中可以添加以下代码：

onScroll(e) {
  const { scrollTop, scrollHeight, clientHeight } = e.detail;
  const bar = this.$refs.bar;

  // 计算滚动条高度和位置
  const barHeight = clientHeight / scrollHeight * clientHeight;
  const barTop = scrollTop / scrollHeight * clientHeight;

  // 设置滚动条位置和高度
  bar.style.height = barHeight + 'px';
  bar.style.top = barTop + 'px';

  // 显示滚动条
  bar.style.opacity = 1;

  // 3 秒后隐藏滚动条
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
    bar.style.opacity = 0;
  }, 3000);
}

在 `scroll` 事件中，通过 `scrollTop`、`scrollHeight` 和 `clientHeight` 计算出滚动条的高度和位置，并设置到滚动条容器的样式中。同时，通过设置 `opacity` 实现滚动条的渐隐渐现效果。这里还设置了一个 3 秒的计时器，在滚动结束后 3 秒自动隐藏滚动条。

希望能对您有所帮助。