mint-ui pull down不起作用

Posted 2020-09-15 Yuri 前端什么狮子

<template>
  <div style="min-height:200px">
    <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
    
      <ul>
        <li v-for="(item,index) in list">[{{index}}]{{ item.text }}</li>
      </ul>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span>
        <span v-show="topStatus === ‘loading‘">上拉加载中...</span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↑</span>
        <span v-show="bottomStatus === ‘loading‘">下拉加载中...</span>
      </div>

    </mt-loadmore>
  </div>
</template>

<script>
import axios from ‘axios‘;
import  * as _global from ‘../../plugs/global‘;
import TrendFun from ‘../../plugs/function‘;
import BUS from ‘../../plugs/bus.js‘;
import { Toast,Loadmore } from ‘mint-ui‘;

let trendFun=new TrendFun(); //公共函数库
let __REQUEST=trendFun.__REQUEST();
let __URILIST=_global.default;

 

  export default {
    name: ‘app‘,
    data(){
      return{
        allLoaded:false,
        page:0,
        list: [ ]   
        
      }
    },
    created(){

      //this.getList();
    },
      methods:{
              handleTopChange:function(status) {
                this.topStatus = status;
                console.log("this.topStatus = status; "+ status);
              },

              handleBottomChange:function(status) {
                this.bottomStatus = status;
                console.log("this.bottomStatus = status; "+ status);
              },

              getList:function(page){
                
                  __REQUEST.bizParams={
                    "bankCardId":"" ,// 银行卡ID ----非必填，只有在专门查一个银行卡时传
                    "cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填，不填查所有的
                    "type":"" // 卡类型 0：查询所有卡 1：只查储蓄卡 2：只查信用卡 ----- 非必填
                  }
                  let request=__REQUEST;
                  axios.get(__URILIST[2], {
                      params:request
                    })
                    .then(response=>{
                      let res=response.data; //axios返回的数据是用response.data包括的，和jquery不一样
                      if(res.data){
                        let tmparry=[];
                        //console.log(res.data.debitList);
                        res.data.msgList.map((e,i)=>{
                           if(e.msgType==1 && i<=3){
                              tmparry.push(e);
                            }
                          
                        });
                        this.list = this.list.concat(tmparry);
                        //this.list.push(tmparry);
                        console.log(tmparry);    
                      }
                      
                    })
                    .catch(function (error) {
                      console.log(error);
                    });


            },
            loadTop:function(){
                  console.log(this.page);
                  //默认是第三页，下拉刷新的时候获取第一页
                  //this.page=1;
                  this.getList(this.page);
                  this.$refs.loadmore.onTopLoaded(); //手动调用，组件定位
                  this.$refs.loadmore.onBottomLoaded();
                  console.log("上拉执行");
              },
              loadMore:function(){
                  console.log("loadMore");
                  
              },
              loadBottom:function() {
                  console.log("下拉在执行");
                  this.page=this.page+1;
                  
                  console.log("this.page:"+this.page);
                  this.getList(this.page);
                  if(this.page==20){
                    this.allLoaded=true;  //当所有数据 全部读取完成的时候 停止下拉读取数据 
                    //this.$refs.loadmore.onBottomLoaded();
                  }
      
            }

    },
    components: {
      
    }
  }
</script>