专栏首页达摩兵的技术空间mint-ui loadmore 采坑指南

mint-ui loadmore 采坑指南

前言

loadmore的部分主要是mint-ui用来解决上拉以及下拉的部分,用来做加载更多数据或者刷新的部分。

其官方组件:https://mint-ui.github.io/docs/#/zh-cn2/loadmore

使用

其基本使用就不再赘述了,这里主要讲起使用的时候遇到的问题。

上拉加载无法触发

在上拉加载的时候,其事件无法触发,是因为其需要父容器设置为overflow:scroll才可以 ,这个是百度就可以查到的方案

自定义的上下的html交互模板

如果你需要自定义的头或者尾部的显示,需要使用其插槽,slot=top或者bottom即可 。

是否全部加载

top-all-loaded ,bottom-all-loaded ,控制是否全部加载完,来控制是否还支持其事件,我们在交互中也需要定义其数据加载完的操作,这个逻辑还是需要的。

取消过渡状态

你在数据请求完成之后,需要必要性的执行其onBottomLoaded()方法,否则其过渡状态会一直存在。在官方的demo中,其是通过ref的语法得到其组件的,这也保证了我们也可以吧这个的请求完成操作可以写到对应的异步操作函数完成之后的位置。

手机模式打开

在手机端打开预览或者chrome部分手机模拟器都可以实现其官方的效果演示的,但是在浏览器模式下会有点问题,问题如下 :

  • 上拉不触发 ,监听不到手势事件
  • pc windows会自动的一直触发上拉事件在页面载入之后,假如你写了api请求,其就会一直请求,直到死机;mac没这个情况。
  • 你的上拉加载的事件一定要写对应的上拉结束的事件,如果写的不对应,那么虽然其会消失过渡状态,但是在之后就不会被触发。

其方法名称使用

要注意的是其api的方法,其文档写的是topMethod ,但是使用的时候其实是:top-method ,其他也是。

是否自动填充容器

这个属性还是比较重要的,autofill:true,默认是true的,其作用是发现数据不够会主动请求数据加载的方法让其能够填满容器,如果你不需要这个方法,手动设置其为false ,:auto-fill=’false’.

心心念的demo

mint-ui loadmore案例

其他

如果你觉得这个模块问题太多了,那么这里推荐你另外的两个模块可以使用下,一个是better-scroll,一个是mescroll .

  • https://github.com/ustbhuangyi/better-scroll ,文档很强,很佛系,滴滴的cube-ui的滚动就是基于这个封装的组件。
  • mescroll,官网以及demo都是非常强大的,stars数标明其也是可以依赖的。http://www.mescroll.com/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-router根据环境改变动态加载组件

    在webpack的新特性中支持组件的懒加载,也就是说我们可以在加载到该路由的时候再把这部分脚本进行加载,同时这个在项目进行打包的时候,对应的文件也会被单独打包,...

    RobinsonZhang
  • “不吹不黑”说一说列表页多“简单”

    相信随着前端职业的兴起,有不少后端或者项目经理觉得前端不就那么回事么?甚至于有些时候,后端一看这么个简单的东西也要做一天?那么本文就带大家了解一下一个还算正常的...

    RobinsonZhang
  • 每页500条数据的渲染优化

    每页返回500条的数据,前端一次渲染用户体验很不好,有哪些方式可以友好的解决这个问题。

    RobinsonZhang
  • Java后端面试学习知识总结——JVM

    JVM就是Java虚拟机,Java的跨平台机制就是建立在强大的Java虚拟机的基础上。Java是一种先编译后解释型的语言,当我们写了一段Java代码,在运行之前...

    星如月勿忘初心
  • 「JAVA」Java基础之堆、栈、方法区、类加载器——JVM内存模型分析

    相信正经,或者不正经的程序员小伙伴们,亦或者非开发小伙伴,多多少少都听说过JVM(Java虚拟机),Java程序的运行支持;同时,也是高级程序员的必须掌握的底层...

    老夫编程说
  • 虚拟机类加载机制

      虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验、转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制。在...

    YGingko
  • Java虚拟机知识点快速复习手册(下)

    Csdn全复习手册文章导航:https://blog.csdn.net/qqxx6661/article/details/86775594

    后端技术漫谈
  • 深入Java虚拟机|类加载机制

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载、验证、准备、解析、初始化、使用和卸载七个阶段。它们开始的顺序如下图所示:

    技术从心
  • 深入理解Java类加载机制

    其中解析过程在某些情况下可以在初始化阶段之后再开始,这是为了支持 Java 的动态绑定。

    李红
  • ClassLoader的工作机制

    用户2146856

扫码关注云+社区

领取腾讯云代金券