uni-app vue滚动插件better-scroll

在处理uni-app中的滚动需求时，better-scroll 是一个常用的插件，它提供了平滑的滚动效果和丰富的滚动功能。以下是如何在uni-app中使用better-scroll的一个简单示例，假设你已经安装并配置好了better-scroll。

1. 安装better-scroll

首先，确保你已经安装了better-scroll。在项目的根目录下运行以下命令：

npm install better-scroll --save

2. 创建滚动视图组件

接下来，在你的uni-app项目中创建一个新的组件，比如ScrollList.vue，用于展示滚动列表。

<template>
  <view class="scroll-wrapper" ref="wrapper">
    <view class="scroll-content">
      <view v-for="(item, index) in items" :key="index" class="scroll-item">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import BScroll from 'better-scroll';

export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 3,
      scrollY: true
    });

    this.scroll.on('scroll', (pos) => {
      console.log(pos.y); // 打印当前滚动位置
    });
  },
  beforeDestroy() {
    if (this.scroll) {
      this.scroll.destroy();
    }
  }
};
</script>

<style scoped>
.scroll-wrapper {
  height: 100vh;
  overflow: hidden;
}

.scroll-content {
  height: 100%;
}

.scroll-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
</style>

3. 使用滚动视图组件

在你的页面组件中引入并使用ScrollList组件：

<template>
  <view>
    <ScrollList />
  </view>
</template>

<script>
import ScrollList from '@/components/ScrollList.vue';

export default {
  components: {
    ScrollList
  }
};
</script>

4. 运行项目

确保你的uni-app项目配置正确，然后运行项目。你应该能看到一个可以垂直滚动的列表，并且在控制台中打印出当前的滚动位置。

这个示例展示了如何在uni-app中使用better-scroll实现基本的滚动功能。根据需求，你可以进一步配置better-scroll的其他选项，如滚动惯性、上拉加载、下拉刷新等。