当前位置：Gxlcms > JavaScript > vuemint-ui中loadmore组件解析

vuemint-ui中loadmore组件解析

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文主要介绍了vue mint-ui源码解析之loadmore组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

接入

官方接入文档mint-ui loadmore文档

接入使用Example

html

<p id="app">
  <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance="150"
         @top-status-change="handleTopChange" ref="loadmore">

    <p slot="top" class="mint-loadmore-top">
      <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
      <span v-show="topStatus === 'loading'">Loading...</span>
      <span v-show="topStatus === 'drop'">释放更新</span>
    </p>

    <ul class="scroll-wrapper">
      <li v-for="item in list" @click="itemClick(item)">{{ item }}</li>
    </ul>

  </mt-loadmore>
</p>

css

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" rel="external nofollow" >
*{
  margin: 0;
  padding: 0;
}
html, body{
  height: 100%;
}

#app{

  height: 100%;
  overflow: scroll;
}
.scroll-wrapper{
  margin: 0;
  padding: 0;
  list-style: none;

}
.scroll-wrapper li{
  line-height: 120px;
  font-size: 60px;
  text-align: center;
}

实现原理解析

布局原理

loadmore组件内部由三个slot组成，分别为name=top,name=bottom,default；
top用于展示下拉刷新不同状态展示的内容，初始设置margin-top为-top的高度来将自己隐藏
bottom同top，用于展示上拉加载更多不同状态展示的内容
default填充滚动详细内容

实现原理

主要是通过js的touch事件的监听来实现
在touchmove事件，如果是向下滑动并且滚动的dom的scrollTop为0，那么整个组件向下偏移(滑动的距离/比值)展示出top solt的内容
在touchmove时间，如果是向上滑动并且滑动到了底部，再继续滑动整个组件向上偏移(滑动的距离/比值)展示出bottom solt的内容

源码解析

组件的template html

 <p class="mint-loadmore">
  <p class="mint-loadmore-content" :class="{ 'is-dropped': topDropped || bottomDropped}" :style="{ 'transform': 'translate3d(0, ' + translate + 'px, 0)' }">
   <slot name="top">
    <p class="mint-loadmore-top" v-if="topMethod">
     <spinner v-if="topStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
     <span class="mint-loadmore-text">{{ topText }}</span>
    </p>
   </slot>
   <slot></slot>
   <slot name="bottom">
    <p class="mint-loadmore-bottom" v-if="bottomMethod">
     <spinner v-if="bottomStatus === 'loading'" class="mint-loadmore-spinner" :size="20" type="fading-circle"></spinner>
     <span class="mint-loadmore-text">{{ bottomText }}</span>
    </p>
   </slot>
  </p>
 </p>

关于上面的spinner标签，是一个组件，这里不做详细介绍。top solt和bottom slot中的内容是展示的内容，可以通过外部自定义的方式传入。

其实它的实现有一个很严重的弊端，就是写死了top solt和bottom slot的高度为50px，而且js中的处理也是使用50px进行的逻辑处理。所以并满足我们开发中自定义top slot 和bottom slot的需求。

js核心解析

props解析：关于props的解析，可以参考mint-ui的官方文档
data解析

上面的关于每个data数据的具体作用通过注释做了详细说明。

watch解析

上面是组件通过watch监听的两个变量，后面我们能看到他们的改变是在touchmove事件中进行处理改变的。它的作用是通过它的变化来改变top slot和bottom slot的文本内容；

同时发出status-change事件给外部使用，因为可能外部自定义top slot 和bottom slot的内容，通过此事件来通知外部当前状态以便外部进行处理。

核心函数的解析

这里就不将所有的method列出，下面就根据处理的所以来解析对应的method函数。

首先，入口是在组件mounted生命周期的钩子回调中执行init函数

init函数：

init函数主要是初始化状态和事件的一些操作，下面着重分析touch事件的回调函数的处理。

首先touchstart事件回调处理函数

主要是记录初始位置和重置状态变量。

下面继续touchmove的回调处理函数

上面的代码逻辑挺简单，注释也就相对不多。

重点谈一下checkBottomReached()函数，用来判断当前scroll dom是否滚动到了底部。

经过我的测试，上面的代码是有问题:

当scrollEventTarget是window的条件下，上面的判断是不对的。因为document.body.scrollTop总是比正常值小1，所以用于无法满足到达底部的条件；

当scrollEventTarget不是window的条件下，上面的判断条件也不需要在this.scrollEventTarget.getBoundingClientRect().bottom后面加1，但是加1也不会有太大视觉上的影响。

最后来看下moveend事件回调的处理函数

总结

下拉刷新和上拉加载更多的实现原理可以借鉴
getScrollEventTarget()获取滚动对象，getScrollTop()获取滚动距离，checkBottomReached()判断是否滚动到底部；这三种方式可以借鉴
缺点：写死了top slot 和 bottom slot的高度，太不灵活；这个地方可以优化

vuemint-ui中loadmore组件解析

人气教程排行