vue3-better-scroll v1.0.0

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:

Slots:

Ref:

Events:

Mr.Mao's blog

Mr.Mao's blog