vue3-better-scroll

基于 Vue3 | TypeScript | BetterScroll 的滑动块组件

Use in SPA

<template>
  <scroll-view
    :pull-down-refresh="true"
    :pull-up-load="true"
    :pull-up-load-end="isUpLoadEnd"
    @pullup="onPullupHooks"
    @pulldown="onPulldownHooks"
  >
    <!-- 顶部下拉刷新插糟(提示内容, 当pull-down-refresh为true时展示) -->
    <template v-slot:pull-down-tips>Pull down and load more</template>
    <!-- 顶部下拉刷新插糟(加载内容, 当@pulldown执行中显示) -->
    <template v-slot:pull-down-loading>Loading...</template>
    <!-- 滑动块内容插糟 -->
    <template v-slot:scroll-content>
      <div class="scroll-item" v-for="(item, index) in emojis" :key="index">
        {{ item }}
      </div>
    </template>
    <!-- 底部上拉刷新插糟(提示内容, 当pull-up-load为true时展示) -->
    <template v-slot:pull-up-tips>Pull up and load more</template>
    <!-- 底部上拉刷新插糟(加载内容, 当@pullup执行中显示) -->
    <template v-slot:pull-up-loading>Loading...</template>
    <!-- 底部上拉刷新插糟(结束内容, 当pull-up-load-end为true时展示) -->
    <template v-slot:pull-up-end>End...</template>
  </scroll-view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ScrollView from '../components/scroll-view.vue'
const emojis = ref([
  '😀 😁 😂 🤣 😃',
  '😄 😅 😆 😉 😊',
  '😫 😴 😌 😛 😜',
  '👆🏻 😒 😓 😔 👇🏻',
  '😑 😶 🙄 😏 😣',
  '😞 😟 😤 😢 😭',
  '................'
])
const isUpLoadEnd = ref(false)

const awaitPromise = (time: number) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(true), time)
  })
}
// 上拉刷新测试
const onPullupHooks = async (finish: () => void) => {
  await awaitPromise(1000)
  // 更新数据完成后, 调用 finish 刷新状态
  finish()
}
// 上拉刷新测试
const onPulldownHooks = async (finish: () => void) => {
  await awaitPromise(1000)
  // 更新数据完成后, 调用 finish 刷新状态
  finish()
}
</script>
<style lang="scss">
.scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  text-align: center;
  &:nth-child(2n) {
    background-color: #f3f5f7;
  }
  &:nth-child(2n + 1) {
    background-color: #42b983;
  }
}
</style>

Attributes:

参数	说明	类型
height	滑动块高度(默认页面高度)	Number
navHeight	头部导航高度, 单位 px (默认0)	Number
tabHeight	底部导航高度, 单位 px (默认0)	Number
pullUpLoad	是否开启上拉(底部)刷新	Boolean
pullUpLoadEnd	是否上拉拖动到底了	Boolean
pullDownRefresh	是否开启下拉(头部)刷新	Boolean
pullDownRefreshTopHeight	下拉加载停止的高度, 单位 px (默认40)	Number
options	可自行根据 better-scroll 官方文档 扩展参数 例：:options="{click:true}"	Object

Slots:

name	说明
pull-down-tips	顶部下拉刷新提示内容, 当 pullDownRefresh 为 true 时展示, 加载时隐藏
pull-down-loading	顶部下拉刷新加载内容, 当 pullDownRefresh 为 true 时展示, 加载时线上
scroll-content	滚动的主体内容区域
pull-up-tips	底部上拉刷新提示内容, 当 pullUpLoad 为 true 时展示, 加载与结束时隐藏
pull-up-loading	底部上拉刷新加载内容, 当 pullUpLoad 为 true 时展示, 加载时显示, 结束时隐藏
pull-up-end	底部上拉刷新提示内容, 当 pullUpLoad 为 true 时展示, 结束时显示

Ref:

name	说明
ref.scroll	better-scroll 实例

Events:

事件名称	说明	回调参数
@scroll	触发时机：滚动过程中，具体时机取决于 options 中的 probeType	pos {Object} 滚动的实时坐标
@pulldown	触发时机：滚动到顶部超出一定距离时，用于下拉刷新	finish {Function} 重置刷新状态回调（必须调用）
@pullingUp	触发时机：滚动到底部部超出一定距离时，用于上拉刷新	finish {Function} 重置刷新状态回调（必须调用）

Mr.Mao's blog

Mr.Mao's blog