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.导包 ...
随机推荐
- Vue.js之深入浅出
介绍引言 Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上 ...
- tensorflow 实现神经网络
import tensorflow as tf import numpy as np # 添加层 def add_layer(inputs, in_size, out_size, activation ...
- EasyUI combobox 中文无法检索最终解决方案!
写在前面: 因为之前一直用EasyUI的combobox控件,但是苦于在火狐浏览器下输入中文无法直接检索必须在输入完成后再敲击一下键盘才可以(按一下shift或空格),原因是中文输入法屏蔽了EasyU ...
- HDOJ-2006求奇数的乘积
Problem Description 给你n个整数,求他们中所有奇数的乘积. Input 输入数据包含多个测试实例,每个测试实例占一行,每行的第一个数为n,表示本组数据一共有n个,接着是n个整数 ...
- file-API 实现添加图片 预览缩略图(自己学习)
首先看看 "效果图" : 我们最终实现的就是点击右侧的"相机"按钮添加想要添加的图片然后可以根据需要删除(点叉删除本条)或再次添加图片,并显示缩略图....走起 ...
- Hadoop 新生报道(三) hadoop基础概念
一.NameNode,SeconderyNamenode,DataNode NameNode,DataNode,SeconderyNamenode都是进程,运行在节点上. 1.NameNode:had ...
- react学习01
react react render()函数返回只能是一个标签(里面可以包其他东西) state(状态) vs props(属性) state 改变,视图改变,state是一个组件里面的状态,然后pr ...
- equals()与 == 比较,hashCode方法
1.Object类 Object类是java中一切类的父类,java中所有的类都直接或间接 继承自Object类 Object中定义的方法不多,原因在于,java的类多种多样 ...
- 13. Roman to Integer【leetcode】
Roman to Integer Given a roman numeral, convert it to an integer. Input is guaranteed to be within t ...
- [vijos NOIP模拟题]天神下凡 贪心+搜索
样例: 考试的时候没时间打了,随便敲了敲就交上去了,没想到竟然编译错误,忘定义n了23333 自己测了测能骗20分hhhh 考虑每个圆对答案的贡献,当一个圆被小圆内切的时候,分成了两半,对答案的贡献就 ...