解决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 相关文章推荐
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
深入理解js中this的用法
2016/05/28 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
详解Python的三种拷贝方式
2020/02/11 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
模具专业推荐信
2013/10/30 职场文书
分公司经理任命书
2014/06/05 职场文书
自我管理的活动方案
2014/08/25 职场文书
企业法人代表证明书
2015/06/18 职场文书
加强党性修养心得体会
2016/01/21 职场文书
2019年思想汇报
2019/06/20 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript