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 相关文章推荐
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
小程序实现密码输入框
Nov 16 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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 访问数据库配置通用方法(json)
2018/05/20 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python如何对齐字符串
2020/07/30 Python
工程管理专业个人求职信范文
2013/12/07 职场文书
半年思想汇报
2013/12/30 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
机械工程师岗位职责
2014/06/16 职场文书
员工趣味活动方案
2014/08/27 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
食品药品安全责任书
2015/05/11 职场文书
运动会致辞稿
2015/07/29 职场文书