网络日志

组件库Mint UI上拉加载更多插件Loadmore的使用tips

  1. 引入import { Loadmore } from "mint-ui";
  2. html

    <top-loadmore :distanceIndex="2" :bottom-method="addMoreData" :auto-fill="false" ref="loadmore" :bottomPullText="bottomPullText">
     <div class="list-item" v-for="(item,index) in listArr" :key="index" @click="toRecordDetail(item.user_exchange_id)">
     列表内容
     </div>
    </top-loadmore>
  3. js

    import { Loadmore } from "mint-ui";
    export default {
     components: {
         "top-loadmore": Loadmore,
       },
     data(){
         return{
             page_num:1,
             bottomPullText:"上拉加载更多",
         }
     },
      methods:{
         loadList(){
             if(_this.page_num!=1){
                  _this.$refs.loadmore.onBottomLoaded();//这里数据回调成功之后要重新获取mt-loadmore内部的高度,防止上拉后不复位,首次请求或查询第一页不执行,防止头部scroll遮挡问题
             }
         },
         addMoreData(){
             if(this.flag) return false
             if (this.totalPageNum > this.page_num) {
                 this.page_num++
                 this.loadList()
             }
             this.$refs.loadmore.onBottomLoaded();
    //这里数据回调成功之后要重新获取mt-loadmore内部的高度,防止上拉后不复位。如果是下拉刷新页面,则需要执行: this.$refs.loadmore.onTopLoaded();
         },
     },
    }
  4. 上拉过程中容易触发列表点击事件修复需修改两个文件:\node_modules\mint-ui\lib\mint-ui.common.js\node_modules\mint-ui\lib\loadmore\index.js修改内容:

    handleTouchEnd: function handleTouchEnd(event) {
       if (this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {
         event.preventDefault();//此处为阻止滑动时点击click,自定义添加
         event.stopPropagation();//此处为阻止滑动时点击click,自定义添加
         this.topDropped = true;
         if (this.topStatus === 'drop') {
           this.translate = '50';
           this.topStatus = 'loading';
           this.topMethod();
         } else {
           this.translate = '0';
           this.topStatus = 'pull';
         }
       }
       if (this.direction === 'up' && this.bottomReached && this.translate < 0) {
         event.preventDefault();//此处为阻止滑动时点击click,自定义添加
         event.stopPropagation();//此处为阻止滑动时点击click,自定义添加
         this.bottomDropped = true;
         this.bottomReached = false;
         if (this.bottomStatus === 'drop') {
           this.translate = '-50';
           this.bottomStatus = 'loading';
           this.bottomMethod();
         } else {
           this.translate = '0';
           this.bottomStatus = 'pull';
         }
       }
       this.$emit('translate-change', this.translate);
       this.direction = '';
    }