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/