请选择 进入手机版 | 继续访问电脑版

VueJs 3 前端开发技术学习 Front-end Study

 找回密码
 加入学习
搜索
热搜: 活动 交友 discuz
查看: 411|回复: 0

mescroll.js 一款在H5端运行的下拉刷新和上拉加载插件

[复制链接]

33

主题

35

帖子

187

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
187
发表于 2022-4-12 16:38:27 | 显示全部楼层 |阅读模式
一款精致的、在H5端运行的下拉刷新和上拉加载插件,主要用于列表分页、刷新等场景。
安装:
  1. npm install mescroll.js
复制代码
基础用法(VUE组件):
  1. <template>
  2.   <div>
  3.     <mescroll-vue
  4.       ref="mescroll"
  5.       :down="mescrollDown"
  6.       :up="mescrollUp"
  7.       @init="mescrollInit"
  8.     >
  9.       <!--内容...-->
  10.     </mescroll-vue>
  11.   </div>
  12. </template>

  13. <script>
  14. import MescrollVue from 'mescroll.js/mescroll.vue'

  15. export default {
  16.   components: {
  17.     MescrollVue
  18.   },
  19.   data() {
  20.     return {
  21.       mescroll: null, // mescroll实例对象
  22.       mescrollDown: {}, //下拉刷新的配置
  23.       mescrollUp: {
  24.         // 上拉加载的配置
  25.         callback: this.upCallback
  26.       },
  27.       dataList: [] // 列表数据
  28.     }
  29.   },
  30.   methods: {
  31.     // 初始化的回调,可获取到mescroll对象
  32.     mescrollInit(mescroll) {
  33.       this.mescroll = mescroll
  34.     },
  35.     // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
  36.     upCallback(page, mescroll) {
  37.       // 发送请求
  38.       axios
  39.         .get('xxxxxx', {
  40.           params: {
  41.             num: page.num, // 当前页码
  42.             size: page.size // 每页长度
  43.           }
  44.         })
  45.         .then(response => {
  46.           // 请求的列表数据
  47.           let arr = response.data
  48.           // 如果是第一页需手动置空列表
  49.           if (page.num === 1) this.dataList = []
  50.           // 把请求到的数据添加到列表
  51.           this.dataList = this.dataList.concat(arr)
  52.           // 数据渲染成功后,隐藏下拉刷新的状态
  53.           this.$nextTick(() => {
  54.             mescroll.endSuccess(arr.length)
  55.           })
  56.         })
  57.         .catch(e => {
  58.           // 请求失败的回调,隐藏下拉刷新和上拉加载的状态;
  59.           mescroll.endErr()
  60.         })
  61.     }
  62.   }
  63. }
  64. </script>

  65. <style scoped>
  66. .mescroll {
  67.   position: fixed;
  68.   top: 44px;
  69.   bottom: 0;
  70.   height: auto;
  71. }
  72. </style>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入学习

本版积分规则

QQ|Archiver|手机版|小黑屋|vue3

GMT+8, 2022-5-28 22:13 , Processed in 0.038132 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表