Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题
所遇问题:
该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded();
有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位
分析原因:
首先这四个模块都是用的
<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
以上所述有不严谨之处欢迎指正
Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题的更多相关文章
- JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?
history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- Flutter - 添加从左向右滑动,返回上一个页面
很多App比如微信.IT之家等都支持从屏幕左侧向右滑动,来返回上一个页面. 很多iOS上的App也都支持. 那么这个神奇的手势滑动是怎么实现的呢? 其实非常简单,只需要添加一句话即可. platfor ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- ASP.NET上传文件,已经上传的大小保存在session中,在另一个页面中读取session的值不行
想自己做个ASP.NET上传文件时显示进度条的, 按照自己的想法,其实也就是显示每次已经上传的字节,从网上找到一个方法是能够把文件变成流以后再慢慢写入的,我在那个循环写入的时候每循环一次都把已经上传的 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- vue-scroller实现vue单页面的上拉加载和下拉刷新问题
在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...
随机推荐
- Android - FEATURE_NO_TITLE
Android设置无标题的方法 在onCreate()中写入: requestWindowFeature(Window.FEATURE_NO_TITLE); 例如: protected void on ...
- USB基础知识
Q: USB是什么? A: USB是通用串行总线(Universal Serial Bus)的缩写. Q: USB的优点有哪些? A: ① 支持热插拔:(hot-plugging或Hot Swap)即 ...
- poj_3468: A Simple Problem with Integers (树状数组区间更新)
题目是对一个数组,支持两种操作 操作C:对下标从a到b的每个元素,值增加c: 操作Q:对求下标从a到b的元素值之和. 这道题也可以用线段树解,本文不做描述,下面分析如何用树状数组来解决这道题. 先把问 ...
- easyUI日期框返回到月份,选择日期也只到月份
easyUI日期框返回到月份,选择日期也只到月份,不是原创,引用了园友的一篇文章,自己写下来,以便不时之需,谢谢. 1 $(function () { $('#date').datebox({ onS ...
- (转)流量加速插件 FinalSpeed介绍及一键安装教程
原文章连接:https://blog.kuoruan.com/82.html 1 介绍 官方介绍:FinalSpeed是高速双边加速软件,可加速所有基于tcp协议的网络服务,在高丢包和高延迟环境下,仍 ...
- 初学安卓开发随笔之 Intent 用法
首先,对于安卓开发,目前世界上流行的是使用的是Android studio 2.0 .(hh 学着来呗 书上说用这个,,) 今后就定一个计划 每天更新一个Android 随笔,增强一下自控力吧!!! ...
- python学习好文
摘要: 学习别人的学习历程. 一 iTech的博客 http://www.cnblogs.com/itech/archive/2011/01/31/1948265.html
- IntelliJ idea学习资源
工作需要, 最近得从Eclipse转战到Idea, 找了些不错的学习资料: 1, 从eclipse上迁移过来的用户说明: https://www.jetbrains.com/help/idea/201 ...
- 花了一年时间开发出来的EZNest 自动套料软件
随着国内钢结构制造业的迅猛发展,市场竞争也愈演愈烈.近来钢材价格的大幅攀升,节约用材已成为企制胜的戈键,提高钢材的利用车自然就成了目前许多企业十分关心的一件事.对十大型钢结构生产制造商来说,如留在传统 ...
- java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析
java多线程系列(五)---synchronized ReentrantLock volatile Atomic 原理分析 前言:如有不正确的地方,还望指正. 目录 认识cpu.核心与线程 java ...