前端vue里面点击加载更多_vue2.0 移动端实现下拉刷新版和上拉加载更多的示例...

本人正在使用 vue2.0 + webpack + es6 搭建前端架构，整理了部分插件，下面这个是下拉升级 上拉更多的，挺好用的，共享给大家。

直接上代码，不懂的多看几遍，下面我换会告诉大家怎么使用。

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

下拉升级

松开升级

升级中

加载中……

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下，  然后引入到网页 , 下面是我引用的demo

上代码： 里面有注释哦，有问题给我留言！

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

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

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

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持乐购源码。