betway必威-betway必威官方网站
做最好的网站

loadmore组件注意的问题,下拉刷新loadTop报错解决

<div class="noData" v-if="lifeList.length==0">
<img src="../assets/images/noData.png" alt="图片 1">
<p>这里暂时还没有内容哦~亲</p>
</div>
<mt-loadmore :top-method="loadTop" ref="loadTop" v-else>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<LifeListItem :lists="lifeList" merchantType="user"></LifeListItem>
<div class="loading-text" v-show="{loadingTextBtn:true}">

<mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</div>
</div>
<div class="refreshComplete" v-if="refreshComplete==true">帖子已更新</div>
</mt-loadmore>

vue-cli中vue-scroller的事无巨细用法,上拉加载下拉刷新,vue-axios获取数据的详细进程

浅谈mint-ui loadmore组件注意的主题素材,mint-uiloadmore

一般来讲所示:

loadTop(){
  this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size});
  this.$refs.loadmore.onTopLoaded();
},

举个例子在做下拉刷新的时候,切记在下拉刷新的函数中要加

this.$refs.loadmore.onTopLoaded();

那行代码,不然下拉加载之后一向呈现加载中,而不会加载成功。

上述那篇浅谈mint-ui loadmore组件注意的主题素材便是小编分享给大家的全部内容了,希望能给我们三个参照,也期望我们多多协助帮客之家。

loadmore组件注意的主题素材,mint-uiloadmore 如下所示: loadTop(){ this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size}); this.$refs.l...

出于自个儿设定的页面暗许进入的时候加载二遍刷新函数,刚初步刷新完之后lifeList还不能够马上更新过来,且小编给该零件上加了v-else等推断,所以会报错:

vue如今是断定的风行框架我们都通晓的,vue全家桶的分子是:vue-cli,vuex,vue-router,vue-axios(vue二.0)。然后它的第壹方插件也许有不知凡几,比方:vue-scroller,vue-lazyload,vue-awesome-swiper等等的。

Error in mounted hook: "TypeError: Cannot read property 'onTopLoaded' of undefined"

之前自个儿早就给咱们介绍过vue-lazyload的用法了,后天就给大家说一下vue-scroller的用法吧。

获取当前this.$refs能够看看有其1dom成分 loadTop
不过this.$refs.loadTop打字与印刷则为undefined

先是在命令行进行npm||cnpm||bower下载

消除办法:

npm install vue-scroller -D

loadTop(){
        this.$store.dispatch('refreshLifeList', {
          city: this.city,
          country: this.country,
          category: this.category,
          page: 0,
          size: this.size
        });
        this.page  ;
        if(this.lifeList.length>0){ //这个判断是新加的
          this.$refs.loadTop.onTopLoaded();
        }
        this.refreshComplete = true;
        setTimeout(() => {
          this.refreshComplete = false;
        }, 2000)
      },

:::!!!-D:就是 --save -dev

给loadTop函数里的

然后在您想要用scrolle的卓殊页面里将我们刚才下载的事物引进

this.$refs.loadTop.onTopLoaded(); 做一个判断即可。

或者在html中不要加v-if和v-else是否展示的判断都可。

import Vue from 'vue'

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

其壹插件首如果标签,何人须求张开上拉加载下拉刷新就给哪个人加。然后中间有:on-refresh="refresh"&&:on-infinite="infinite" || ref="domName"

:::!!!ref是获取dom元素的。

this.$refs.myscroller.resize()//重新设置大小=>myscroller是上边ref定义的dom成分的名字

this.$refs.myscroller.finishInfinite(二);//未有多少时的管理函数

下一场在methods对象里进入五个函数:infinite()&&refresh()

本文由betway必威发布于网页设计,转载请注明出处:loadmore组件注意的问题,下拉刷新loadTop报错解决

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。