这次给大家带来怎样操作vue2.0 移动端实现下拉刷新和上拉加载，操作vue2.0 移动端实现下拉刷新和上拉加载的注意事项有哪些，下面就是实战案例，一起来看一下。
直接上代码，不懂的多看几遍，下面我换会告诉大家如何使用。
<template lang="html">
<p 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>
</p>
</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>
<p>
<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>
</p>
</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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用js获取dom 元素绝对位置
vue前端开发有哪些规范
以上就是怎样操作vue2.0 移动端实现下拉刷新和上拉加载的详细内容。