饿了么mint-ui库loadmore组件的下拉问题
一、在android和ios端，下拉不顺畅或者一点点倾斜滑动都会拖动到整个列表下拉
二、ios使用fastclick的情况下，下拉刷新会发生点击穿透的问题
三、左右滑动时禁止loadmore组件进行下拉（需求）
前言
我在使用饿了么移动端 mint-ui库的loadmore组件的时候，发现有些细节体验和功能并不能满足项目需求，并且目前业界开源的项目里也找不到满意的库。相比之下，最后还是饿了么比较贴切需求，所以决定查看源码进行修改。
挺久之前我把自己的解决方案 issues在了 minit-ui/loadmore仓库。
因为最近有一些开发者还是存在疑问，@我，所以决定花点时间写篇文章清晰总结一下。
首先明确一下，以下方法都需修改到源码
位置：node_modules\mint-ui\lib\mint-ui.common.js
2653行 ~ 2975行mt-loadmore 组件代码之间
一、在android和ios端，下拉不顺畅或者一点点倾斜滑动都会拖动到整个列表下拉
解决方法： 设置下拉阈值（loadmore组件没有对外的设置选项）。
打开mint-ui.common.js ，2894行左右找到如下代码，并修改为5，具体多少可自己决定。
1 |
this.direction = distance > 5 ? 'down' : 'up'; |
二、ios使用fastclick的情况下，下拉刷新会发生点击穿透的问题
解决方法： 在 touchEnd 方法里添加禁止冒泡和禁止默认事件。
2930行左右，添加如下代码：
1 2 |
event.preventDefault(); event.stopPropagation(); |
三、左右滑动时禁止loadmore组件进行下拉（需求）
解决方法：思路是，在左右滑动的回调事件中，通知loadmore组件，我正在滑动，然后loadmore组件根据这个通知去禁止下拉动作，反之，在不滑动的回调事件中，通知loadmore组件，可以触发下拉动作了。
滑动/不滑动回调 -> loadmore组件 -> 禁止/允许触发下拉动作
具体的左右滑动库，或者左右滑动的回调的方法不在本文章范畴，请自行实现。但本文章将会例出我自己的实现方案作为参考。
具体实现： 2712行左右，在props里添加一个新的属性：swiper（名字自己定哈），作为loadmore组件接收左右滑动回调事件的props
1 2 3 4 |
swiper:{
type: Boolean,
default: false
}
|
首先：我们要弄清楚 loadmore组件要怎么根据 swiper 这个属性去禁止触发下拉动作。找到如下位置，添加中间的代码：
1 2 3 4 5 6 7 8 |
var distance = (this.currentY - this.startY) / this.distanceIndex;
/**************** 中间是添加的地方 ***************/
if(this.swiper){
distance = 0;
}
#下拉阈值为 0 的话是不能进行下拉动作的
/**************** 中间是添加的地方 ***************/
this.direction = distance > 5 ? 'down' : 'up';
|
这样就可以了，简单吧！（但是你要看懂源码，并进行修改，还是需要点火候）
然后：
1、左右滑动的事件回调中传swiper的值为true，到loadmore组件中。
2、停止滑动的事件回调中传swiper的值为false，到loadmore组件中。
我左右滑动组件用的是vue-awesome-swiper(swiper的vue轮子)
具体如下：
swiperOption 是vue-awesome-swipe组件的初始设置选项
isSwiper 是2个事件回调设置的值，传给loadmore 组件
data：
methods：
HTML：
1 2 3 4 5 6 7 8 9 |
<template> <!-- 左右滑动组件 --> <swiper :options="swiperOption" ref="mySwiper" > <swiper-slide v-for='item in column' :key='item'> <!-- 下拉组件 --> <mt-loadmore :top-method="loadTopAjax" @top-status-change="handleTopChange" ref="loadmore" :auto-fill='false' :swiper='isSwiper'> </swiper-slide> </swiper> </template> |
JS：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script>
data () {
return {
isSwiper: false,
swiperOption: {
onSliderMove: this.slideMoveCallBack, // 滑动中回调
onTouchEnd: this.touchEndCallBack // 滑动结束件回调
}
}
},
methods: {
slideMoveCallBack () { // 滑动中
this.isSwiper = true
},
touchEndCallBack () { // 滑动结束
this.isSwiper = false
}
}
</script>
|
这样就可以了，还是很简洁优雅的是吧！
实现后的效果: demo
我修改之后的源码文件 ：mint-ui.common.js
注意
1、在vue-cli 开发环境下，修改好了mint-ui.common.js 热加载会自动生效的，如果没有改变，请查看是否修改对了mint-ui.common.js 文件
2、记得把修改好的源码保留，重新 install mint-ui 会没有了的。