本文作者:问几许

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

问几许 4年前 ( 2018-11-21 ) 3160 抢沙发
饿了么mint-ui库 loadmore + Swiper组件的下拉问题摘要: 一、在android和ios端,下拉不顺畅或者一点点倾斜滑动都会拖动到整个列表下拉二、ios使用fastclick的情况下,下拉刷新会发生点击穿透的问题三、左右滑动时禁止loadm...

一、在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,具体多少可自己决定。

this.direction = distance > 5 ? 'down' : 'up';

二、ios使用fastclick的情况下,下拉刷新会发生点击穿透的问题

解决方法: 在 touchEnd 方法里添加禁止冒泡和禁止默认事件。
2930行左右,添加如下代码:

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

本文转载于:http://liansixin.win/2017/08/01/mint-ui/

文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/47.html发布于 4年前 ( 2018-11-21 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,3160人围观)参与讨论

还没有评论,来说两句吧...