百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

超顺滑 Vue 下拉刷新+上滑无限加载组件Vue-Scroller

suiw9 2024-11-24 21:40 17 浏览 0 评论

今天给小伙伴们分享一个超平滑的下拉刷新及上拉无限加载组件VueScroller。

vue-scroller 基于 vue+Vonic UI 如丝般滑动组件。轻松实现下拉刷新及无限加载更多数据，支持多个滚动及自定义Spinner加载图标。

安装

$ npm i vue-scroller -S

引入组件

// 在main.js中全局引入
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

使用方法

<template>
  <div class="scroll-wrap">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
      <!-- your content -->
    </scroller>
  </div>
</template>

<script>
export default {
  data () {
    return {
      page: 1
    }
  },
  methods: {
    // 获取数据
    getData() {
      // ...
    },
    // 下拉刷新
    refresh() {
      console.log('refresh')
      this.page = 1
      this.getData()
	  
      //刷新完毕停止下拉刷新调用事件
      this.$refs.myscroller.finishPullToRefresh()
    },
    // 上拉加载
    infinite(done) {
      console.log('infinite')
      this.page++
      this.getData()
	  
      // 显示没有更多数据
      this.$refs.myscroller.finishInfinite(true)
    }
  }
}
</script>
# demo地址
https://wangdahoo.github.io/vue-scroller/

# 项目地址
https://github.com/wangdahoo/vue-scroller

ok，就介绍到这里。如果大家有其它Vue下拉刷新组件，欢迎交流讨论！

相关推荐

设置文件的默认打开方式（如何设定文件的默认打开方式）

在操作系统中，设置文件的默认打开方式可以让特定类型的文件始终使用你选择的程序打开。以下是Windows和macOS系统中设置默认打开方式的详细步骤：Windows系统方法1：通过文件属性设置右键点...

电脑怎么设置默认浏览器（电脑怎么设置默认浏览器?）

在电脑上设置默认浏览器的步骤因操作系统不同而有所差异。以下是Windows和Mac系统的设置方法：Windows系统方法1：通过系统设置打开“设置”：...

Java接口默认方法:灵活与约束并存

Java接口默认方法：灵活与约束并存在Java编程的世界里，接口作为定义行为规范的重要工具，一直扮演着举足轻重的角色。然而，在Java8引入了默认方法之后，接口的设计和使用方式发生了微妙的变化。今天...

Java8新特性之默认方法:为接口注入灵魂

Java8新特性之默认方法：为接口注入灵魂Java8发布时，它带来的最大创新之一就是接口的默认方法。这就像给一个传统的木偶注入了生命，让它不仅能动还能说话了。今天我们就来聊聊这个让Java开发者欢呼雀...

CentOS系统在不重启的情况下为虚拟机添加新硬盘

一、概述用过虚拟机的都知道，如果在系统运行的时候去给虚拟机添加一块新设备，比如说硬盘，系统是读取不到这个新硬盘的，因为系统在启动的时候会去检测硬件设备。但是我们也可能会遇到这样的情况，比如正在运行比较...

[常用工具] 基于psutil和GPUtil获取系统状态信息

本文主要介绍在Python3中利用psutil库获取系统状态，利用GPUtil获取gpu状态。psutil(processandsystemutilities)（进程和系统实用程序）是一个跨平...

Docker容器内执行宿主机指令（docker执行宿主机shell）

一背景最近项目有个需求，需要程序配置服务器IP并且可以重启服务器。如果程序直接部署在服务器，相信大家都会操作。但是程序是用docker运行的，在docker中执行指令就很麻烦了。...

容器网络调试怎么办?一条命令就搞定!

nsenter命令是一个可以在指定进程的命令空间下运行指定程序的命令。它位于util-linux包中。用途...

linux自动化巡检脚本集（linux服务器巡检内容以及标准）

以下是一个自动化巡检脚本集的制作方案，包含常见系统检查项和可扩展框架，使用Python和Shell脚本实现：...

麒麟KOS|统信UOS系统添加新数据盘
麒麟KOS|统信UOS系统添加新数据盘

原文链接：麒麟KOS|统信UOS系统添加新数据盘...

2025-03-26 16:57 suiw9

Linux CentOS 7 根目录扩容（linux扩展根目录磁盘空间）

一、现状描述现有一台CentOS7的虚拟机，硬盘容量为30GB通过lsblk命令查看分区容量，当前根目录容量为27.5GB左右二、扩容需求...

从Linux底层分析Docker原理（linux docker-compose）

写在前面如果你觉得本人对你有帮助，请你记得评论，点赞，关注；如果你觉得文章还不错请记得收藏，点赞。如果你觉得文章非常的好可以私信我，我会在第一时间回复你。...

CentOS新增硬盘的使用步骤（centos扩展硬盘）

一、查看机器所挂硬盘个数及分区情况，新增硬盘为/dev/sdb...

Python之psutil库简介（python3 pil库）

psutil(pythonsystemandprocessutilities)是一个跨平台的第三方库，能够轻松实现获取系统运行的进程和系统利用率（包扩CPU、内存、磁盘、网络等）信息。它主...

运维，你还不会查看Linux系统cpu信息?

CPU也称为微处理器或简称为处理器。就像大脑如何控制人体一样，CPU控制着计算机的所有部分。因此CPU被认为是计算机的大脑。那我们怎么在Linux系统中查看如IntelCorei3、i5、AM...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.