mint-ui Loadmore使用

一、引包

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

二、页面引用

    <section class="promotion_clerk_main" :style="{
       '-webkit-overflow-scrolling': scrollMode}"><mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"><div class="accout_item" v-for="(item,index) in promotionClerkList" :key="index"><div class="promotion_clerk_title">文案{
   {index + 1}}</div><div class="promotion_clerk_des">{
   {item.content}}</div><div class="promotion_clerk_copy clerk_detail" :data-clipboard-text="item.content" @click="copy">复制文案</div></div></mt-loadmore></section>

import {
     Toast, Loadmore } from 'mint-ui'
export default {
    data () {
    return {
    allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据scrollMode:"auto",   }},components: {
    'mt-loadmore': Loadmore},activated () {
    this.getpromotionClerk() // 初始化运行},methods: {
    loadTop () {
    this.soureForm.pageIndex = 1this.getpromotionClerk()this.$refs.loadmore.onTopLoaded()},loadBottom () {
    this.more()this.$refs.loadmore.onBottomLoaded()},more () {
    this.soureForm.pageIndex++this.getpromotionClerk()},isHaveMore (HaveMore) {
    this.allLoaded = trueif (HaveMore) {
      this.allLoaded = false}},  // 获取推广文案getpromotionClerk () {
    let parm = this.soureFormparm.sourceType = 'copywriting'getPromotePage(JSON.stringify(parm), res => {
    if (res.success) {
    this.isHaveMore(res.object.hasNextPage) // 获取是否还有下一页this.promotionClerkList = [...this.promotionClerkList, ...res.object.list]this.$nextTick(() => {
    this.scrollMode = 'touch'})} else {
    this.promotionClerkList = []}})},} 

.promotion_clerk_main {
    overflow: auto;}   

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！