mint-ui下拉加载min和上拉刷新（demo实例）
Posted cx709452428
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于mint-ui下拉加载min和上拉刷新（demo实例）的主要内容，如果未能解决你的问题，请参考以下文章
react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载