component -a method dbo cli more wid etime flex

<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實例）