vue-mugen-scroll组件实现pc端滚动刷新

由于工作的原因，现在需要实现一个滚动加载(PC端)的效果，之前使用的是vue+element，但是element没有类似的组件，所以去github上找了一个名叫vue-mugen-scroll，使用起来很简单也很方便，所以给大家分享一下如果使用。

一、准备工作

首先需要安装一下组件：

npm install --save vue-mugen-scroll

不需要全局引用，在需要的地方引用即可：

import MugenScroll from "vue-mugen-scroll";
export default {
 components: { MugenScroll }
};

二、编码

直接上代码

<template>
 <section>
 <div id="user-table" ref="user-table">
  <div>
  <el-table :data="tableDate" border style="width: 100%">
   <el-table-column prop="name" label="用户姓名"></el-table-column>
  </el-table>
  </div>
  <mugen-scroll :handler="loadMore" :should-handle="!loading" scroll-container="user-table">
  </mugen-scroll>
 </div>
 </section>
</template>

<script>
import MugenScroll from "vue-mugen-scroll";
export default {
 name: "app",
 components: { MugenScroll },
 data() {
 return {
  // 加载状态
  loading: false,
  // 当前页数
  page: 1,
  // 总页数
  pageTotal: 3,
  pagesize: 10,
  // 模拟后端返回的数据
  datas: [
  { id: "1", name: "用户1" },
  { id: "2", name: "用户2" },
  { id: "3", name: "用户3" },
  { id: "4", name: "用户4" },
  { id: "5", name: "用户5" },
  { id: "6", name: "用户6" },
  { id: "7", name: "用户7" },
  { id: "8", name: "用户8" },
  { id: "9", name: "用户9" },
  { id: "10", name: "用户10" },
  { id: "11", name: "用户11" },
  { id: "12", name: "用户12" },
  { id: "13", name: "用户13" },
  { id: "14", name: "用户14" },
  { id: "15", name: "用户15" },
  { id: "16", name: "用户16" },
  { id: "17", name: "用户17" },
  { id: "18", name: "用户18" },
  { id: "19", name: "用户19" },
  { id: "20", name: "用户20" },
  { id: "21", name: "用户21" },
  { id: "22", name: "用户22" },
  { id: "23", name: "用户23" },
  { id: "24", name: "用户24" },
  { id: "25", name: "用户25" },
  { id: "26", name: "用户26" },
  { id: "27", name: "用户27" }
  ],
  // 列表中的数据
  tableDate: []
 };
 },
 methods: {
 // 加载更多
 loadMore() {
  // 是否当前page不是最后一页
  if (this.page <= this.pageTotal) {
  console.log("loadMore...");
  this.loading = true;
  // 模拟分页查询
  let startIndex = (this.page - 1) * this.pagesize;
  let endIndex = startIndex + this.pagesize;
  this.tableDate.push(...this.datas.slice(startIndex, endIndex));
  // 页码+1
  this.page++;
  console.log(this.tableDate);
  this.loading = false;
  }
 }
 }
};
</script>
<style scoped>
#user-table {
 width: 400px;
 height: 400px;
 overflow-y: scroll;
 margin: 100px auto;
}
</style>

说明一下，这里最主要的就是<mugen-scroll>这个标签，should-handle属性就是是否需要执行加载方法，handler就是加载的具体方法，scroll-container就是指向的元素的ref，需要注意的是，需要滚动加载的元素，如#user-table，需要设置它的具体高度，而且要设置滚动条，就像我在<style>写到的，不然没有效果。

三、效果图

初始效果

滚动后的效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue的下拉刷新指令和滚动刷新指令

    基于vue的下拉刷新指令和滚动刷新指令

    小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单 在滚动刷新的时候,需要在列表滚动到

  • vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

    代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-

  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

    前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用

  • vue实现消息的无缝滚动效果的示例代码

    朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="

  • 详解 vue better-scroll滚动插件排坑

    详解 vue better-scroll滚动插件排坑

    BetterScroll号称目前最好用的移动端滚动插件,因此它的强大之处肯定是存在的.要不...哈哈.个人感觉还是很好用的.这篇文章不是笼统的讲 BetterScroll ,而是单讲滚动,想要深入了解它,请移步这里. 滚动原理 better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 featur

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • 解决Vue页面固定滚动位置的处理办法

    最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置

  • vue使用mint-ui实现下拉刷新和无限滚动的示例代码

    vue使用mint-ui实现下拉刷新和无限滚动的示例代码

    在开发web-app中,总会遇到v-for出来的li会有很多,当数据达几百上千条的时候,一起加载出来会造成用户体验很差的效果. 这时候我们可以使用无限滚动和下拉刷新来实现控制显示的数量,当刷新到底部的边界的时候会触发无限滚动的事件,再次加载一定数量的条目. 还是拿在项目中的功能来举栗子介绍. 有个列表,几千条数据,做分页查询,限制每次显示查询20条,每次拉到最后20条边缘的时候,触发无限滚动,这时候会出现加载图标,继续加载后续20条数据,加载到最后的时候会提示数据"加载完毕". 项目的

  • vue-mugen-scroll组件实现pc端滚动刷新

    由于工作的原因,现在需要实现一个滚动加载(PC端)的效果,之前使用的是vue+element,但是element没有类似的组件,所以去github上找了一个名叫vue-mugen-scroll,使用起来很简单也很方便,所以给大家分享一下如果使用. 一.准备工作 首先需要安装一下组件: npm install --save vue-mugen-scroll 不需要全局引用,在需要的地方引用即可: import MugenScroll from "vue-mugen-scroll"; ex

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

  • vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: <div class="list" ref="scrollTopList"> <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)"> <span cla

  • vue组件实现移动端九宫格转盘抽奖

    本文实例为大家分享了vue组件实现移动端九宫格转盘抽奖的具体代码,供大家参考,具体内容如下 vue-lucky-draw 移动端九宫格转盘抽奖vue组件,中奖的奖品数据由接口决定. 效果图 抽奖 因为中奖的结果是后台返回的,所以要考虑转盘的最终停下来的位置必须是在对应后台返回结果的奖品的位置,也就是要模拟出这个中奖的过程(所以所谓的抽奖都是骗人的,嘿嘿).先要写出移动的背景框对应的各个位置的css,然后动态切换class来使其呈现出转动效果.明白了过程就好写了. 中间的按钮用的是css3的ani

  • vue中pc移动滚动穿透问题及解决

    vue中pc移动滚动穿透问题及解决

    目录 vue pc移动滚动穿透问题 上层无滚动(很简单直接@touchmove.prevent) 上层有滚动 滑动穿透终极解决方案 问题描述 问题探究 原理探究 vue pc移动滚动穿透问题 上层无滚动(很简单直接@touchmove.prevent) <div @touchmove.prevent> 我是里面的内容 </div> 上层有滚动 如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 t

  • Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

    Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一.Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2

  • vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算过程. 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !

随机推荐