如何封装了一个vue移动端下拉加载下一页数据的组件


Posted in Javascript onJanuary 06, 2019

前言

简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载!

组件代码

<template>
 <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($event)" >
  <!-- top -->
  <div class="scroll-list">
   <slot name='scrollList'></slot>
   <div class="scroll-bottom">
    <div v-if="state==1">
     <i><img :src="Load"/></i>
     <p>加载中</p>
     </div>
    <div v-if="state==2">加载完成</div>
    <div v-if="state==3">没有数据了</div>
   </div>
  </div>
 </div>
</template>
<script type="text/javascript">
import Load from '@/assets/Load.gif'
export default {
 name: 'myScroll',
 props: {
 'onPull': { // 加载回调
  type: Function,
  require: true
 },
 'scrollState': {// 是否可滑动
  type: Boolean,
  require: true
 },
 loaded: {
  type: Boolean,
  default() {
  return false
  }
 }
 },
 data() {
 return {
  Load,
  timeoutId: null,
  state: 0,
  myScroll: null
 }
 },
 methods: {
 /*
    * 加载中:1
    * 加载完成:2
    * 没有更多:3
    */
 setState(index) { // 修改状态
  this.state = index
  // console.log(this.state)
 },
 onScroll(e) {
  const _this = this
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  // console.log(window.innerHeight + scrollTop, this.myScroll.offsetHeight)
  if (!this.loaded && window.innerHeight + scrollTop - 50 >= this.myScroll.offsetHeight) {
  clearTimeout(this.timeoutId)
  _this.timeoutId = setTimeout(() => {
   _this.bottomCallback()
  }, 100)
  }
 },
 bottomCallback() { // 加载回调
  // console.log('回调', new Date().getTime())
  if (this.state != 3) {
  this.state = 1
  this.onPull()
  }
 }
 },
 mounted() {
 this.myScroll = this.$refs.myScroll // 获取滑条dom
 }
}
</script>
<style lang="scss" scoped>
 .allow{
  overflow:hidden;
  height: auto;
 }
 .prohibit{
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  overflow:hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transition: all 450ms;
  backface-visibility: hidden;
  perspective: 1000;
 }
 .my-scroll{
  position: relative;
   color: #999;
  .scroll-top{
   text-align: center;
   display:flex;
   position:absolute;
   top:0;
   left:0;
    width:100%;
    overflow: hidden;
  }
  .scroll-list{
   overflow:hidden;
   min-height: 100%;
  }
  .scroll-bottom{
   text-align: center;
   line-height: .8rem;
  div{
    display:flex;
     height:auto;
    width:100%;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
    i{
     flex:1 0 100%;
     display:block;
     height: 0.4rem;
    }
    img{
     width:0.6rem;
    }
    p{
     flex:1 0 100%;
    }
   }
  }
 }
</style>

使用

<template>
 <div id="app">
  <my-scroll class="scrolls" ref="myScroll" :on-pull="getList" :loaded="loaded" :scroll-state="scrollState">
   <div slot="scrollList">
   <div class="list" v-for="(item,index) in listData" :key="index">{{item.name}}</div>
   </div>
  </my-scroll>
 </div>
</template>
<script>
import myScroll from "./components/vue-scroll.vue";
import axios from 'axios'
export default {
 name: "app",
 data(){
 return{
  scrollState: true, // 是否可以滑动
  loaded: false,
  iPage: 1,
  listData:[],
  iPageSize: 10,
 }
 },
 methods: {
 getList(){
  this.$refs.myScroll.setState(1)
  let _this = this
  // ajax 请求
  axios.get('https://easy-mock.com/mock/5b90f971ce624c454133ee2d/scoll/datalist').then(function (response) {
   if (response.data.code == 200 && response.data.data.pagelist.length > 0 && !_this.loaded) {
    if (_this.iPage == 1) {
    _this.listData = response.data.data.pagelist
    } else {
    _this.listData.push(...response.data.data.pagelist)
    }
    _this.iPage++
    _this.$refs.myScroll.setState(2)
   } else {
    if (_this.iPage == 1) {
    _this.czListData = []
    }
    _this.loaded = true
    _this.$refs.myScroll.setState(3)
   } 
   })
   .catch(function (error) {
   console.log(error);
   });
  }

 },
 mounted () {
 this.getList() 
 },
 components: {
 myScroll
 }
};
</script>

<style scoped>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.scrolls{
 font-size:.24rem;
}
.list{
 height:.9rem;
 line-height: .9rem;
 margin-bottom:.1rem;
 border-bottom:1px solid #dedede;
 color:#999;
 font-size:.28rem;
}
</style>

组件已放到github,欢迎下载和star

可以直接在vue项目中运行这个组件

github地址:https://github.com/confidence68/vue_mobile_scrollLoadpage

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
js或css实现滚动广告的几种方案
Jan 28 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 #Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 #Javascript
react-router4按需加载(踩坑填坑)
Jan 06 #Javascript
React 实现拖拽功能的示例代码
Jan 06 #Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 #Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 #Javascript
Bootstrap4 gulp 配置详解
Jan 06 #Javascript
You might like
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
Python异常处理总结
2014/08/15 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python实现的特征提取操作示例
2018/12/03 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python安装后的目录在哪里
2020/06/21 Python
python制作抽奖程序代码详解
2021/01/15 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
两年的个人工作自我评价
2014/01/10 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript