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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
vue中的scope使用详解
Oct 29 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 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引用效率问题分析
2012/03/23 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Javascript验证方法大全
2015/09/21 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
python模糊图片过滤的方法
2018/12/14 Python
Django框架 querySet功能解析
2019/09/04 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python代码需要缩进吗
2020/07/01 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
中科前程Java笔试题
2016/11/20 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
我的祖国演讲稿
2014/05/04 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
个人党性锻炼总结
2015/03/05 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
使用Python解决图表与画布的间距问题
2022/04/11 Python
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android