自定义滚动条——scroll-view组件bindscroll实例应用

2023-10-13 23:59:19

在互联网高速发展的今天，越来越多的人沉迷于手机和平板等移动设备，随之也带来了移动设备APP开发的火爆，无论是原生的还是基于框架，在移动设备上滚动查看数据的功能已经成为标配。实现滚动的最常用组件就是scroll-view组件，它可以设置滚动方向，也可以监听滚动事件。但是，原生提供的滚动条样式并不能满足所有的需求，因此就有了自定义滚动条的需求。

今天，我们就来聊聊如何利用scroll-view组件的bindscroll事件来自定义滚动条。

原理

scroll-view组件的bindscroll事件会在滚动时触发，并生成scrollLeft、scrollTop等数据。我们可以利用这些数据来计算滚动条的位置和长度，并根据需要自定义滚动条的样式。

步骤

获取scroll-view组件的实例

const scrollview = this.createSelectorQuery().select('#scrollview');
scrollview.fields({ scrollTop: true, scrollHeight: true, scrollWidth: true }).exec((res) => {
  this.scrollTop = res[0].scrollTop;
  this.scrollHeight = res[0].scrollHeight;
  this.scrollWidth = res[0].scrollWidth;
});

计算滚动条的位置和长度

const scrollbarHeight = 20; // 滚动条高度
const scrollbarWidth = 10; // 滚动条宽度
const scrollbarTop = this.scrollTop / (this.scrollHeight - scrollview.height) * (scrollview.height - scrollbarHeight);
const scrollbarLeft = 0;
const scrollbarLength = scrollbarHeight / (this.scrollHeight - scrollview.height) * scrollview.height;

自定义滚动条样式

this.setData({
  scrollbarStyle: `height: ${scrollbarHeight}px; top: ${scrollbarTop}px; left: ${scrollbarLeft}px; width: ${scrollbarWidth}px;`
});

监听滚动事件

<scroll-view id="scrollview" bindscroll="onScroll" style="width: 100%; height: 100%;"></scroll-view>

更新滚动条位置

onScroll(e) {
  this.scrollTop = e.detail.scrollTop;
  const scrollbarTop = this.scrollTop / (this.scrollHeight - scrollview.height) * (scrollview.height - scrollbarHeight);
  this.setData({
    scrollbarStyle: `height: ${scrollbarHeight}px; top: ${scrollbarTop}px; left: ${scrollbarLeft}px; width: ${scrollbarWidth}px;`
  });
}