下拉加载封装

<vue-loading :url="$store.state.url + '/Homepages/moreList?page=1&limit=10&type=1' " @ievent="loaddata"></vue-loading>

loaddata(res) {

var _this = this;

 _.each(res, function(e) {

  _this.list = _this.list || [];

  _this.list.push(e);

})

},

<template>

<div>

<div class="loading">

<div style="text-align: center; font-size: 0.35rem;color: #797777;">{{text[type]}}</div>

</div>

<div class="toup" @click="top()" v-show="show">

<i class="iconfont icon-fanhuidingbu3"></i>

</div>

</div>

</template>

<script>

import { querystring } from 'vux'

export default {

data() {

return {

type: 0,

show: true,

text: [

'加载中...',

'加载完成',

'没有更多数据了',

'暂无数据',

],

page: 1,

}

},

props: ['url'],

mounted() {

var _this = this

_this.ajax()

$(document).unbind('scroll')

$(document).scroll(function() {

_this.scr()

})

},

methods: {

top() {

$(document).animate({

scrollTop: 0

}, 'slow')

},

scr() {

var _this = this

if($(document).scrollTop() > 500) {

_this.show = true

} else {

_this.show = false

}

if($(document).scrollTop() >= $('#app').height() - $(window).height()) {

if(_this.type == 2 || _this.type == 0 || _this.type ==3) {

return

}

_this.ajax()

}

},

ajax() {

if(!this.url) return

var _this = this

_this.type = 0

var data = querystring.parse(_this.url.split('?')[1])

data.page = _this.page

var url = _this.url.split('?')[0] + '?' + querystring.stringify(data)

  this.$http.post(url, data, _this.list).then((res) => { //获取数据

if(res) {

_this.type = 1

_this.$emit('ievent', res)

if(res.length == 0) {

_this.type = 3

} else {

if(res.length < 10) {

_this.type = 2

} else {

_this.type = 1

}

_this.page++

}

} else {

_this.type = 3

}

})

}

},

destroyed() {

var _this = this

$(document).unbind('scroll')

},

}

</script>

<style scoped>

.loading {

padding-top: 0.1rem;

clear: both;

}

.toup {

position: fixed;

right: 0.2rem;

bottom: 1.5rem;

z-index: 50;

}

 

.toup i {

font-size: 0.4rem;

}

.toup i::before {

display: block;

float: left;

background: #0e8ee7;

width: 0.6rem;

height: 0.6rem;

line-height: 0.6rem;

text-align: center;

color: #fff;

}

</style>

posted @ 2019-12-30 10:33  郑正正  阅读(188)  评论(0编辑  收藏  举报
Live2D