mint-ui下拉加载min和上拉刷新（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">

<mt-loadmore

auto-fill='false'

topPullText='' topDropText='' topLoadingText='刷新数据' topDistance='50' bottomPullText='' bottomDropText='' bottomDistance='50'

:top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">

<ul>

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

</ul>

</mt-loadmore>

<div class="loadingStyle" v-show="allLoaded==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 { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore);

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,

allLoaded:false

}

},

components: {

headx,

searchNew,

loadingPull

},

props: {

appMenuName: {

type: null

}

},

methods: {

back() {

this.$router.go(-1);

},

loadTop() {

// load more data

console.log(1);

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

this.$refs.loadmore.onTopLoaded();

},

loadBottom() {

// load more data

console.log(2);

this.allLoaded = true;// if all data are loaded

setTimeout(() => {

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

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

this.list.push(last + i);

}

this.allLoaded = false;

}, 1500);

this.$refs.loadmore.onBottomLoaded();

}

},

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

position absolute

overflow hidden

width 100%

top 3.2rem

bottom 0

background #f7f8f8

overflow-y: auto;

-webkit-overflow-scrolling: touch;

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>