餓了麼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 會沒有了的。