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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
jQuery中extend函数详解
Jul 13 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
详解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实现MySQL更新记录的代码
2008/06/07 PHP
php 中英文语言转换类
2011/09/07 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python交互式图形编程实例(二)
2017/11/17 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
对python的输出和输出格式详解
2018/12/08 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python 带时区的日期格式化操作
2020/10/23 Python
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
网络教育自我鉴定
2013/11/01 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
啦啦队口号大全
2014/06/16 职场文书
法院授权委托书格式
2014/09/28 职场文书
工作证明英文模板
2014/10/21 职场文书
公务员政审材料
2014/12/23 职场文书
用Python实现Newton插值法
2021/04/17 Python