這次給大家?guī)?lái)怎樣操作vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載，操作vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

直接上代碼，不懂的多看幾遍，下面我換會(huì)告訴大家如何使用。

: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">

下拉更新

松開(kāi)更新

更新中

加載中……

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()

}

}

}

.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;

}

把上面組件拷貝一下，存成后綴是.vue的組件放到你的component下， 然后引入到頁(yè)面 , 下面是我引用的demo

上代碼： 里面有注釋哦，有問(wèn)題給我留言！

• {{item.name}}
• {{item.name}}

import Scroll from './y-scroll/scroll';

export default{

data () {

return {

counter : 1, //默認(rèn)已經(jīng)顯示出15條數(shù)據(jù) count等于一是讓從16條開(kāi)始加載

num : 15, // 一次顯示多少條

pageStart : 0, // 開(kāi)始頁(yè)數(shù)

pageEnd : 0, // 結(jié)束頁(yè)數(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

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

}

}

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

總結(jié)

以上是生活随笔為你收集整理的下拉刷新和上拉加载 php,怎样操作vue2.0 移动端实现下拉刷新和上拉加载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。