uniappscroll-view自定义滚动条

在uniapp中，scroll-view组件默认使用系统自带的滚动条，但是我们可以通过自定义样式来实现自定义滚动条。

创建一个自定义滚动条组件

在components目录下创建一个名为CustomScrollbar的组件，在template中编写自定义滚动条的HTML结构，如下所示：

<template>
  <div class="scrollbar-container">
    <div class="scrollbar-thumb"></div>
  </div>
</template>

在组件中添加样式

在CustomScrollbar组件的style中添加样式，如下所示：

<style>
.scrollbar-container {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  width: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20%;
  background: #333;
  border-radius: 2px;
}
</style>

在scroll-view组件中引用自定义滚动条组件

在需要使用自定义滚动条的scroll-view组件中，引用CustomScrollbar组件，并将其放置在scroll-view的内部，如下所示：

<template>
  <scroll-view class="scroll-view-container" scroll-y>
    <custom-scrollbar></custom-scrollbar>
    <!-- 内容区域 -->
  </scroll-view>
</template>

<script>
import CustomScrollbar from '@/components/CustomScrollbar'

export default {
  components: {
    CustomScrollbar
  }
}
</script>

监听scroll-view的滚动事件

在scroll-view组件中，添加scroll事件的监听函数，并在函数中更新自定义滚动条的位置和高度，如下所示：

<template>
  <scroll-view class="scroll-view-container" scroll-y @scroll="onScroll">
    <custom-scrollbar ref="scrollbar"></custom-scrollbar>
    <!-- 内容区域 -->
  </scroll-view>
</template>

<script>
import CustomScrollbar from '@/components/CustomScrollbar'

export default {
  components: {
    CustomScrollbar
  },
  methods: {
    onScroll(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.target
      const thumb = this.$refs.scrollbar.$el.querySelector('.scrollbar-thumb')
      const thumbHeight = clientHeight / scrollHeight * clientHeight
      const thumbTop = scrollTop / scrollHeight * clientHeight

      thumb.style.height = `${thumbHeight}px`
      thumb.style.transform = `translateY(${thumbTop}px)`
    }
  }
}
</script>

通过以上步骤，我们就可以实现在uniapp中自定义滚动条。需要注意的是，自定义滚动条的样式和位置需要根据实际需求进行修改。