饿了么mint-ui库loadmore组件的下拉问题

最新推荐文章于 2022-02-15 09:35:23 发布

迷途de小狼

最新推荐文章于 2022-02-15 09:35:23 发布

阅读量1.6k

点赞数

分类专栏：前端框架文章标签： mintui mt-loadmore

前端框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

饿了么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

swiper:{
    type: Boolean,
    default: false
}

首先：我们要弄清楚 loadmore组件要怎么根据 swiper 这个属性去禁止触发下拉动作。找到如下位置，添加中间的代码：

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：

<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：

<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 会没有了的。