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
以上所述有不严谨之处欢迎指正
转载于:https://www.cnblogs.com/yunyea/p/7458266.html
- 点赞
- 收藏
- 分享
- 文章举报
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
- vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
- 一个完整最少代码的上拉加载(mint-ui的loadmore 和 vue)
- mint-ui的loadmore和mt-cell-swipe结合使用问题
- jsp中使用vue,加载页面显示{}的问题
- vue项目中使用mint-ui的上拉加载更多时,ios遇到留白情况
- 浅谈Vue.js 关于页面加载完成后执行一个方法的问题
- vue 使用mint-ui组件的mt-loadmore上拉加载更多
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
- 使用vue-mint-ui 上拉加载,下拉刷新效果
- 使用Vue.js和Element-UI做一个简单的登录页面
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- 关于在同一个页面使用多个swiper,多个轮播出现冲突的问题?
- vue中使用mint-ui的mt-popup出现滚动穿透问题解决方法
- vue基于mint-ui组件loadmore实现上拉加载更多,下拉刷新功能
- 一个页面放2段图片滚动代码出现冲突的问题如何解决
- vue.js 部署到tomcat中出现访问路径不对,页面加载不出来问题及解决
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- display不能解决<jsp:include />的问题,jsp异步加载另外一个jsp页面
- vue中配置mint-ui报css错误的问题