mint-ui下拉加载（demo实例）

<template>

<div class="share">

<div class="header">

<div class="top-content">

<span class="iconfont icon-fanhui1" @click="back"></span>

<span>在线客服</span>

<span class="iconfont"></span>

</div>

</div>

<!-- width:23.5rem;height:38.75rem -->

<div class="myScroll">

<ul

v-infinite-scroll="loadMore"

infinite-scroll-disabled="loading"

infinite-scroll-distance="100">

<li v-for="item in list">{{item}}</li>

</ul>

<div class="loadingStyle" v-show="loading==true">

<loading-pull></loading-pull>

</div>

</div>

</div>

</template>

<script>

import Vue from 'vue'

import headx from 'base/head/head-back'

import {mixins} from 'assets/js/mixins'

import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

import i18n from 'assets/js/vi18n/i18n.js'

import searchNew from 'base/search_new/search'

import loadingPull from 'base/loading/loadingPull'

export default {

mixins: [mixins],

i18n,

data() {

return {

timeNow:new Date().getFullYear(),

valueYear:new Date(),

startDate: new Date('2017'),

listData: [],

selectItemData: null,

cancelText:'',

confirmText:'',

list:[],

loading:false

}

},

components: {

headx,

searchNew,

loadingPull

},

props: {

appMenuName: {

type: null

}

},

methods: {

back() {

this.$router.go(-1);

},

loadMore() {

console.log('进来');

// 防止多次加载

if (this.loading) {

return false

}

this.loading = true;

setTimeout(() => {

let last = this.list[this.list.length - 1];

for (let i = 1; i <= 10; i++) {

this.list.push(last + i);

}

this.loading = false;

}, 2000);

}

},

mounted() {

this.list = [1,2,3,4,5,6,7,8,9,10];

},

}

</script>

<style scoped lang="stylus">

@import '~assets/stylus/veriable.styl'

@import "~assets/stylus/mixin.styl"

.share

position absolute

top 0

bottom 0

left 0

right 0

z-index 15

background $color-background

.header

width 100%

background $color-background-head

border-bottom .0625rem solid #dadada

text-align: center

color #000

.top-content

height 3.125rem

padding-top .625rem

width 100%

display flex

justify-content space-between

align-items center

.iconfont

padding 0.625rem

width 3.75rem

color #bfbfbf

font-size .875rem

font-weight normal

.myScroll

max-height: 600px;

overflow-y: auto;

ul

li

line-height 5rem

li:nth-child(even)

background #ccc

.loadingStyle

background white

text-align center

font-size .75rem

line-height 1.875rem

</style>