vue2.0 移动端实现下拉刷新和上拉加载更多的示例


Posted in Javascript onApril 23, 2018

本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家。

直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用。

<template lang="html">
 <div class="yo-scroll"
 :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
 @touchstart="touchStart($event)"
 @touchmove="touchMove($event)"
 @touchend="touchEnd($event)"
 @scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
  <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
   <header class="pull-refresh">
    <slot name="pull-refresh">
      <span class="down-tip">下拉更新</span>
      <span class="up-tip">松开更新</span>
      <span class="refresh-tip">更新中</span>
    </slot>
   </header>
   <slot></slot>
   <footer class="load-more">
    <slot name="load-more">
     <span>加载中……</span>
    </slot>
   </footer>
  </section>
 </div>
</template>

<script>
export default {
 props: {
  offset: {
   type: Number,
   default: 40
  },
  enableInfinite: {
   type: Boolean,
   default: true
  },
  enableRefresh: {
   type: Boolean,
   default: true
  },
  onRefresh: {
   type: Function,
   default: undefined,
   required: false
  },
  onInfinite: {
   type: Function,
   default: undefined,
   require: false
  }
 },
 data() {
  return {
   top: 0,
   state: 0,
   startY: 0,
   touching: false,
   infiniteLoading: false
  }
 },
 methods: {
  touchStart(e) {
   this.startY = e.targetTouches[0].pageY
   this.startScroll = this.$el.scrollTop || 0
   this.touching = true
  },
  touchMove(e) {
   if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
    return
   }
   let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
   if (diff > 0) e.preventDefault()
   this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)

   if (this.state === 2) { // in refreshing
    return
   }
   if (this.top >= this.offset) {
    this.state = 1
   } else {
    this.state = 0
   }
  },
  touchEnd(e) {
   if (!this.enableRefresh) return
   this.touching = false
   if (this.state === 2) { // in refreshing
    this.state = 2
    this.top = this.offset
    return
   }
   if (this.top >= this.offset) { // do refresh
    this.refresh()
   } else { // cancel refresh
    this.state = 0
    this.top = 0
   }
  },
  refresh() {
   this.state = 2
   this.top = this.offset
   this.onRefresh(this.refreshDone)
  },
  refreshDone() {
   this.state = 0
   this.top = 0
  },

  infinite() {
   this.infiniteLoading = true
   this.onInfinite(this.infiniteDone)
  },

  infiniteDone() {
   this.infiniteLoading = false
  },

  onScroll(e) {
   if (!this.enableInfinite || this.infiniteLoading) {
    return
   }
   let outerHeight = this.$el.clientHeight
   let innerHeight = this.$el.querySelector('.inner').clientHeight
   let scrollTop = this.$el.scrollTop
   let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
   let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
   let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
   if (bottom < infiniteHeight) this.infinite()
  }
 }
}
</script>
<style>
.yo-scroll {
 position: absolute;
 top: 2.5rem;
 right: 0;
 bottom: 0;
 left: 0;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 background-color: #ddd
}
.yo-scroll .inner {
 position: absolute;
 top: -2rem;
 width: 100%;
 transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
 position: relative;
 left: 0;
 top: 0;
 width: 100%;
 height: 2rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
.yo-scroll.touch .inner {
 transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
 display: block;
}
.yo-scroll.up .up-tip {
 display: block;
}
.yo-scroll.refresh .refresh-tip {
 display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
 display: none;
}
.yo-scroll .load-more {
 height: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
} 
</style>

把上面组件拷贝一下,存成后缀是.vue的组件放到你的component下,  然后引入到页面 , 下面是我引用的demo

上代码: 里面有注释哦,有问题给我留言!

<template>
 <div>
    <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
    <ul>
     <li v-for="(item,index) in listdata" >{{item.name}}</li>
     <li v-for="(item,index) in downdata" >{{item.name}}</li>
    </ul>
  </v-scroll>
 </div>
</template>
<script>
import Scroll from './y-scroll/scroll';

export default{
 data () {
  return {
   counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
   num : 15, // 一次显示多少条
   pageStart : 0, // 开始页数
   pageEnd : 0, // 结束页数
   listdata: [], // 下拉更新数据存放数组
   downdata: [] // 上拉更多的数据存放数组
  }
 },
 mounted : function(){
   this.getList();
 },
 methods: {
  getList(){
    let vm = this;
     vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
          vm.listdata = response.data.slice(0,15);
         }, (response) => {
          console.log('error');
        });
  },
  onRefresh(done) {
       this.getList();
    
       done() // call done
   
  },
  onInfinite(done) {
       let vm = this;
       vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
         vm.counter++;
         vm.pageEnd = vm.num * vm.counter;
         vm.pageStart = vm.pageEnd - vm.num;
         let arr = response.data;
           let i = vm.pageStart;
           let end = vm.pageEnd;
           for(; i<end; i++){
            let obj ={};
            obj["name"] = arr[i].name;
            vm.downdata.push(obj);
             if((i + 1) >= response.data.length){
             this.$el.querySelector('.load-more').style.display = 'none';
             return;
            }
            }
         done() // call done
          }, (response) => {
          console.log('error');
        });
      }
 },
 components : {
'v-scroll': Scroll
 }
}
</script>

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

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
vue实现商城购物车功能
Nov 27 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 #Javascript
原生JS进行前后端同构
Apr 22 #Javascript
You might like
PHP Undefined index报错的修复方法
2011/07/17 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
利用javascript查看html源文件
2006/11/08 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js实现继承的5种方式
2015/12/01 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
python实现折半查找和归并排序算法
2017/04/14 Python
python使用opencv读取图片的实例
2017/08/17 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
python入门教程之基本算术运算符
2020/11/13 Python
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
网络编辑岗位职责
2014/03/18 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
法制主题班会教案
2015/08/13 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python