解决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

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实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • 基于Vue框架vux组件库实现上拉刷新功能

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新. 首先把基本的样式写好,这里就略过了,然后引入better-scroll库 import BScroll from 'better-scroll'

  • vue2滚动条加载更多数据实现代码

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight.(兼容不同的浏览器). 代码: 1.vue的实现 html: <d

  • 基于vue2实现上拉加载功能

    本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下 因为我们项目中,还用了swiper.很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个.代码如下(这个因为很多地方会用,所以建议放在components/common下面): <template> <div class="loadmore"> <slot></slot> <slot nam

  • vue2笔记 — vue-router路由懒加载的实现

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

  • vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

    mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码. <template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore :top-method="loadTop" :bott

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

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

    所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 <mt-loadmore :top-method="loadTop" :bott

  • Vue 使用 Mint UI 实现左滑删除效果CellSwipe

    Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库. 关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题:也有高度组件化,体积小等优点. 安装Mint UI: # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件: // 引入全部组件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(

  • vue实现弹窗引用另一个页面窗口

    vue实现弹窗引用另一个页面窗口

    目录 弹窗引用另一个页面窗口 弹窗如何嵌入其它页面 A页面(父页面) B页面(子页面) 弹窗引用另一个页面窗口 需求:在一个主页面A.vue上点击按钮时弹出一个窗口,该窗口的定义在B.vue,比如修改,需要从A.vue传参到B.vue,修改完成后,刷新A.vue. 实现 页面定义,有2个文件,在index.vue上有个[修改]按钮,点击弹出testDialog.vue定义的窗口,如下 testDialog.vue <template>   <!-- 添加或修改业务对话框 -->  

  • Vue Mint UI mt-swipe的使用方式

    Vue Mint UI mt-swipe的使用方式

    目录 Mint UI mt-swipe的使用 Mint UI的安装使用 轮播图mt-swipe组件使用 使用mint-ui遇到的坑 1.按需引入:文档上写 2.Header组件的返回问题 3.cell的click不起作用 4.mintUI中indicator报错 Mint UI mt-swipe的使用 Mint UI的安装使用 1.安装 npm install mint-ui -S -S表示 --save 2.在main.js中引入mint Ui的css 和 插件 (全局引用) import M

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • 基于VUE.JS的移动端框架Mint UI的使用

    基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

  • 解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 <template> <div class='content'> 页面内容 </div> </template> 在对应的组件的最外层di

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

随机推荐