mint-ui Loadmore使用

一、引包

// 安装
# Vue 1.x
npm install [email protected] -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 = 1
      this.getpromotionClerk()
      this.$refs.loadmore.onTopLoaded()
    },
    loadBottom () {
      this.more()
      this.$refs.loadmore.onBottomLoaded()
    },
    more () {
      this.soureForm.pageIndex++
      this.getpromotionClerk()
    },
    isHaveMore (HaveMore) {
      this.allLoaded = true
      if (HaveMore) {  
        this.allLoaded = false
      }
    },  
    // 获取推广文案
    getpromotionClerk () {
      let parm = this.soureForm
      parm.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：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。

---------- 创作不易，感谢大家，请多多支持！