使用 vue-scroller插件下拉刷新

最新推荐文章于 2025-06-20 10:29:46 发布

原创最新推荐文章于 2025-06-20 10:29:46 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

Vue 案例专栏收录该内容

91 篇文章

订阅专栏

本文详细介绍如何使用Vue-scroller组件实现下拉刷新功能。通过npm安装并引入VueScroller到项目中，设置模板中的scroller元素，绑定刷新事件，利用setTimeout实现延迟刷新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

安装：

npm i vue-scroller -D

main.js引入：

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

代码：

<template>
    <div>
        <scroller
            :on-refresh="refresh"
　　         ref="my_scroller">
            <h1>我是项目内容</h1>
        </scroller>
    </div>
</template>

<script>
　　export default {
　　　　methods:{
　　　　　　refresh:function(){         //下拉刷新
　　　　　　　　console.log('已刷新')
　　　　　　　　this.timeout = setTimeout(()=>{
　　　　　　　     　this.$refs.my_scroller.finishPullToRefresh()
　　　　　　　　}, 1500)
　　　　　　}
 
　　　　}
　　}
</script>               

<style scope>
h1{
    text-align: center;
}
</style>