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/