vue mint-ui源码解析之loadmore组件

最新推荐文章于 2022-07-14 17:07:32 发布

qiaoba_gogo

最新推荐文章于 2022-07-14 17:07:32 发布

阅读量1.4w

点赞数

分类专栏： fe 文章标签：源码 vue mint-ui

本文链接：https://blog.csdn.net/u010014658/article/details/72912200

版权

本文深入解析了Mint-UI库中Loadmore组件的接入、实现原理、源码分析以及总结。重点讨论了组件的布局结构、触摸事件监听、状态判断等问题，并指出其预设高度限制灵活性的不足。

摘要由CSDN通过智能技术生成

接入

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

接入使用Example

html

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

        <div 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>
        </div>

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

    </mt-loadmore>
</div>

css

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
*{
    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;
}

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>