解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题


Posted in Javascript onNovember 07, 2017

所遇问题:

该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();this.$refs.loadmore.onBottomLoaded();

有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 

解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

分析原因:

首先这四个模块都是用的

 

<mt-loadmore :top-method="loadTop"
     :bottom-method="loadBottom"
     :bottom-all-loaded="allLoaded"
     ref="loadmore">
     <ul class="ul-box">
     <li class="list-cell ta-line" v-for="(item,index) in gridNoPayMail" :key="item+'walletdetail1'" @click="choose(index)">
      <div class="checkboxOne">
      <input type="checkbox" name="checkInput" :id="'id1' + index" v-model="item.checked" disabled/>
      <label :for="'id1' + index"></label>
      </div>
      <div class="left-text">
      <p class="award">{{item.a}}</p>
      <p class="time">{{item.b}}</p>
      </div>
      <div class="right-text">
      <p class="addinfo">¥{{item.c}}</p>
      </div>
     </li>
     </ul>
    </mt-loadmore>

top-method和bottom-method,bottom-all-loaded分别赋予不同的事件名,前两个事件分别表示下拉,上拉,第三个若为真,则 bottomMethod 不会被再次触发,一般进入页面我们默认为false

调用接口成功后进行的取消加载的判断,这里可以给接口的方法一个type值,如果type为top1时则证明正在进行的是下拉刷新执行this.$refs.loadmore1.onTopLoaded();,上拉加载同理,其他三个模块同理

if(type=='top1'){
   this.$refs.loadmore1.onTopLoaded();
   }else if(type=='bottom1'){ 
this.$refs.loadmore1.onBottomLoaded();
}

到了这里就会出现开始所描述问题,

解决方法

一开始做了很多尝试,比如利用v-if当一个模块显示时让其他三个隐藏,总是会出现不同的问题,后来将ref="loadmore"中ref后的参数在四个模块中做了区分比如分别为loadmore1,loadmore2……,这里我是这样理解的,ref 在此的作用为子组件指定一个索引 ID,类似于dom元素的id,id名不能相同,所以我们将ref修改为不同的参数,问题解决,

 附Vue官网链接https://vuejs.org/

mint-ui:https://mint-ui.github.io/docs/#/en2/loadmore

PS:mint-ui loadmore组件注意问题

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

比如在做下拉刷新的时候,切记在下拉刷新的函数中要加

this.$refs.loadmore.onTopLoaded();

这行代码,否则下拉加载之后一直显示加载中,而不会加载完成。

总结

以上所述是小编给大家介绍的Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
vue中SPA单页面应用程序详解
Nov 07 #Javascript
You might like
将php数组输出html表格的方法
2014/02/24 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
python中管道用法入门实例
2015/06/04 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
社团招新策划书
2014/02/04 职场文书
领导班子整改措施
2014/10/24 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
教学质量月活动总结
2015/05/11 职场文书
培训简讯范文
2015/07/20 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技