如何封装了一个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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JS中的三个循环小结
Jun 20 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 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
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python中的ctime()方法使用教程
2015/05/22 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
健康状况证明模板
2014/10/23 职场文书
外出培训学习心得体会
2016/01/18 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python