mt-loadmore实现上拉加载更多，下拉刷新碰到的坑：页面刚加载时总是会触发bottom-method方法的解决方案

最新推荐文章于 2022-07-14 17:07:32 发布
最新推荐文章于 2022-07-14 17:07:32 发布
阅读量941 收藏
点赞数
分类专栏： Vue 文章标签： vue html mint-ui mt-loadmore bottom-method
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suiersuier/article/details/107059728
版权

做一个移动端页面时要实现一个列表的页面，使用的mt-loadmore实现的，但是发现一个问题：页面刚进来时总是会执行自发的触发bottom-method的事件，当列表里数据不止一页时页面就会向下滚动一点，导致刚进入页面看到的内容不是从最顶端的开始，想要的效果是这样，页面刚一进来加载第一页内容展示从页面顶端开始展示

但实际除了正常加载第一页外，自发的触发了bottom-method的方法多加载了一页，而且页面自发的向下进行了滚动成了以下这个样子，顶部的黄色说明部分被遮盖了一部分

解决办法是在<mt-loadmore中增加属性auto-fill ，将属性设置为false，这样进入页面时就不会自发的触发bottom-method事件了，页面就显示正常了

suiersuier
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
11-26
该页面为双选项卡联动，四个部分都需要上拉加载和下拉刷新功能，使用的mint-ui的loadmore插件，分别加上上拉加载后，只有最后一个的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded(); ...
mint-ui中组件Loadmore 的使用 上拉加载（及兼容性问题） 下拉刷新
axIsMyName的博客
08-05 1687
上拉加载 以及 下拉刷新 是内容通过手指移动 而触发事件 在mintUi组件中使用Loadmore方法及其简单 方法如下 <body> <div id="app"> <div class=""> <div class="test"> //这里放组件 ...
mint-ui loadmore上拉刷新 下拉加载
小可爱的博客
12-17 521
利用Vue和mint-ui单页面开发时，遇到“上拉加载，下拉刷新”的功能，使用的mint-ui组件为loadmore组件，遇到了下拉不能加载的的问题，分享解决办法，有待改善，往大神们提意见······· HTML 代码如下： &lt;div class="re_content"&gt; &lt;mt-loadmore :top-method="loadTop" @top-status-c...
Mint UI 使用mt-loadmore等组件
qq_22161527的博客
06-22 2214
背景 项目需要移动端页面，于是就采用了mintUI进行开发。用着用着，有些地方写不出想要的效果，最后加入elementUI，还是elementUI好用。这个做出了的效果适配性很强，但是我还是觉得用uniApp更适合移动端开发。主要介绍我在项目中用的组件。官网地址半天进不去，我使用的是w3c的。 https://www.w3cschool.cn/mintui/ 点击事件 这个地方引用官网的原文，做着做着发现点击事件用不了，回头一看官网，en..... 关于事件绑定 在 Vue 2.0 中，为.
Mint UI—loadmore—Pull down下拉刷新（图文详情）
Poppy_LYT的博客
08-04 915
VUE—Mint UI—loadmore—Pull down下拉刷新 第一步：在官网复制所需代码 loadmore <mt-loadmore :top-method="loadTop" // 此方法用于执行刷新，没有这个方法就没办法刷新，并在methods写这个方法 @top-status-change="handleTopChange" > // 写...
mint-ui下拉组件mt-loadmore遇到的问题
qq_42858057的博客
07-14 604
官方示例代码 部分组件的事件解释： – top-method=“loadTop” 解释：顶部下拉事件（top-method）和此事件被触发时，所执行的方法（loadTop）； – bottom-method=“loadBottom” 解释：底部上拉事件（loadBottom）和此事件被出发时，所执行的方法（loadBottom）； – bottom-all-loaded=“allLoaded” 解释：数据全部加载完毕时，开发者将allLoaded的值设置true，此时底部上拉...
VUE下拉刷新上拉加载更多(mt-loadmore)
换日线的博客
10-24 992
VUE下拉刷新上拉加载更多(mt-loadmore) <div style="height:100vh;overflow: scroll;"> <mt-loadmore :bottomMethod="loadBottom" :bottom-all-loaded="allLoaded" :bottomDistance="1...
在vue中运用mt-loadmore 实现上拉加载，下拉刷新（完整源码）
panax_zrs的博客
03-25 418
<template> <div class="serverList"> <ul class="scrollModeBox" :style="{'-webkit-overflow-scrolling': scrollMode,height: wrapperHeight + 'px'}"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="fal.
结合mint-ui移动端下拉加载实践方法总结
08-28
下面小编就为大家带来一篇结合mint-ui移动端下拉加载实践方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Mint UI组件Loadmore上拉加载一些问题
01-03
页面初始化会请求两次接口 添加属性:auto-fill=“false” 兼容ios上拉加载失效1 （滚动的父元素添加样式） .view { position: absolute; top: 0; right: 0; left: 0; bottom: 0; overflow-y: auto; -webkit-...
load_More(点击加载更多)
08-24
点击加载跟多
ios解决fixed定位失效并mintui的loadmore上拉加载
12-27
ios解决fixed定位失效并用mintui的loadmore完成上拉加载
MT-C5 机型 机器代码：D131/D132/D133 9002.pdf
09-03
MT-C5 机型 机器代码：D131/D132/D133
mint-ui 下拉组件loadmore踩坑
热门推荐
woyidingshijingcheng的博客
04-12 1万+
mint-ui是vue开发中常用的组件库，而loadmore 通常用于处理下拉加载与上拉加载坑1、页面渲染完，loadmore设置的上拉/下拉执行两次产生原因：loadmore设置中的auto-fill需要设置为false实现代码如下：&lt;load-more :bottom-method="loadBottom" :bottom-all-loaded="isLoadAll" ref="load...
饿了么mint-ui库loadmore组件的下拉问题
小狼的博客
03-05 1611
饿了么mint-ui库loadmore组件的下拉问题 一、在android和ios端，下拉不顺畅或者一点点倾斜滑动都会拖动到整个列表下拉 二、ios使用fastclick的情况下，下拉刷新会发生点击穿透的问题 三、左右滑动时禁止loadmore组件进行下拉（需求） 前言 我在使用饿了么移动端 mint-ui库的loadmore组件的时候，发现有些细节体验和功能并不能满足项目需求，并且目前...
more命令，显示分页的功能
qq_39128254的博客
05-20 739
more命令，功能类似 cat ，cat命令是整个文件的内容从上到下显示在屏幕上。 more会以一页一页的显示方便使用者逐页阅读，而最基本的指令就是按空白键（space）就往下一页显示，按 b 键就会往回（back）一页显示，而且还有搜寻字串的功能 。more命令从前向后读取文件，因此在启动时就加载整个文件。 1．命令格式： more [-dlfpcsu ] [-num ] [+/ pattern] [+ linenum] [file … ] 2．命令功能： more命令和cat的功能一样都是查看文件里的内
vue 使用mint-ui组件的mt-loadmore上拉加载更多
qq_27717857的博客
01-28 6511
{{item.title}}       import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Loadmore } from 'mint-ui' Vue.component(Loadmore.name, Loadmore); export
vue mint-ui组件的下拉刷新插件 mt-loadmore 取消下拉
skyj20的博客
08-15 5878
mt-loadmore :top-method="loadTop" :bottom-all-loaded="allLoaded" ref="loadmore1"> mt-loadmore :top-method="loadTop" :bottom-all-loaded="allLoaded" ref="loadm
vue中实现一个搜索框的组件
suiersuier的专栏
07-01 1万+
在前端开发中有些东西就会经常反复使用，这样的东西抽取成组件比较合适，最近工作中遇到一个搜索楼盘的页面需要反复多次使用，抽取成了组件，现在记录一下 1.创建一个searchcom.vue文件 2.文件中填入一下代码，具体内容在代码后边进行解释 <template> <div> <header class="page-header"> <div class="searchwrap border-bottom">
mt -f /dev/st1 tell 返回/dev/st1:input/output error是什么意思 怎么解决
最新发布
06-07
这个错误意味着在尝试与磁带驱动器 /dev/st1 进行通信时发生了输入/输出错误。这可能是由于磁带驱动器故障、磁带故障或系统配置不...如果上述解决方法无法解决问题，则可能需要更多的故障排除步骤或更高级的技术支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值