vue2.0 移動端實現(xiàn)下拉刷新和上拉加載更多的示例
更新時間:2018年04月23日 09:28:46 作者:實現(xiàn)豐盛
本篇文章主要介紹vue2.0 移動端實現(xiàn)下拉刷新和上拉加載更多的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本人正在基于 vue2.0 + webpack + es6 搭建前端架構(gòu),整理了部分插件,下面這個是下拉更新 上拉更多的,挺好用的,分享給大家。
直接上代碼,不懂的多看幾遍,下面我換會告訴大家如何使用。
<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, //默認已經(jīng)顯示出15條數(shù)據(jù) count等于一是讓從16條開始加載
num : 15, // 一次顯示多少條
pageStart : 0, // 開始頁數(shù)
pageEnd : 0, // 結(jié)束頁數(shù)
listdata: [], // 下拉更新數(shù)據(jù)存放數(shù)組
downdata: [] // 上拉更多的數(shù)據(jù)存放數(shù)組
}
},
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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
- vue.js整合vux中的上拉加載下拉刷新實例教程
- 解決Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題
- vue使用mint-ui實現(xiàn)下拉刷新和無限滾動的示例代碼
- vueScroll實現(xiàn)移動端下拉刷新、上拉加載
- vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新
- vue使用better-scroll實現(xiàn)下拉刷新、上拉加載
- vue移動端實現(xiàn)下拉刷新
- vue移動端下拉刷新和上拉加載的實現(xiàn)代碼
- vue實現(xiàn)原生下拉刷新
相關(guān)文章
vue-cli3.0.4中webpack的dist路徑如何修改
這篇文章主要介紹了vue-cli3.0.4中webpack的dist路徑如何修改,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
關(guān)于el-col的使用,占據(jù)寬度的應用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應用解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05
vue3.0 CLI - 1 - npm 安裝與初始化的入門教程
這篇文章主要介紹了vue3.0 CLI - 1 - npm 安裝與初始化的入門教程,本文通過實例代碼相結(jié)合的形式,給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09

