vue基于mint-ui组件loadmore实现上拉加载更多，下拉刷新功能

本文主要是介绍vue基于mint-ui组件loadmore实现上拉加载更多，下拉刷新功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这个是模拟手机写的简单样式，不要在意这些细节，为了撑满容器每次加载十二

那就开始代码了  ==》

先安装 mint-ui

在main.js中引入mint-ui的css样式和组件： 

import 'mint-ui/lib/style.css'import { Loadmore } from 'mint-ui';Vue.component(Loadmore.name, Loadmore);import { Spinner } from 'mint-ui';Vue.component(Spinner.name, Spinner);

然后再新建一个vue组件，放置你的内容：

<template><div><gheader :examplename="examplename"></gheader><div class="page-loadmore-wrapper" :style="{ height: wrapperHeight + 'px' }"><mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff" class="center"></mt-spinner><mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange":bottom-method="loadBottom" @bottom-status-change="handleBottomChange":bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"><!-- :auto-fill="true" 时页面加载完毕时 默认执行loadBottom 值为false时 自己写一个加载 --><div class="hot-list"><div class="hot-one hot-item" v-for="(item,index) in list" :key="index"><a href="javascript:;" class="show clearfix"><div class="img-box"><img src="http://qn2.wkmblog.com/FrBnGzapQmFwvb-PhspYaxkXE7_T?imageView2/1/w/160/h/90" class="fl"></div><h5 class="white-space">别让错误的认知毁掉我们的人生</h5><p>女孩天生就不擅长数学、女孩学不好数学是正常的。因为<span class="color_e85647">...详情</span></p><p class="read"><span class="fa fa-eye"></span> 391 &nbsp;&nbsp;&nbsp;<span class="fa fa-pencil-square-o"></span> 10</p></a></div></div><div slot="top" class="mint-loadmore-top" style="text-align:center"><span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span><mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner></div><div v-if="allLoaded" style="text-align:center;" class="data-none">没有更多数据了</div><div slot="bottom" class="mint-loadmore-bottom"><span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span><span v-show="bottomStatus === 'loading'"><mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner></span></div></mt-loadmore></div><gfooter></gfooter></div>
</template>

js操作：

export default {name: 'Loadmore',data() {return {examplename: 'Loadmore',pageNum: 1,//页码InitialLoading: true,//初始加载list: 0,//数据allLoaded: false,//数据是否加载完毕bottomStatus: '',//底部上拉加载状态wrapperHeight: 0,//容器高度topStatus: '',//顶部下拉加载状态}},mounted() {let windowWidth = document.documentElement.clientWidth;//获取屏幕宽度if (windowWidth >= 768) {//这里根据自己的实际情况设置容器的高度this.wrapperHeight = document.documentElement.clientHeight - 105;} else {this.wrapperHeight = document.documentElement.clientHeight - 80;}setTimeout(() => {//页面挂载完毕 模拟数据请求 这里为了方便使用一次性定时器this.list = 12;}, 1500)},methods: {handleBottomChange(status) {this.bottomStatus = status;},loadBottom() {this.handleBottomChange("loading");//上拉时 改变状态码this.pageNum += 1;setTimeout(() => {//上拉加载更多 模拟数据请求这里为了方便使用一次性定时器if (this.pageNum <= 3) {//最多下拉三次this.list += 12;//上拉加载 每次数值加12} else {this.allLoaded = true;//模拟数据加载完毕 禁用上拉加载}this.handleBottomChange("loadingEnd");//数据加载完毕 修改状态码this.$refs.loadmore.onBottomLoaded();}, 150000);},handleTopChange(status) {this.topStatus = status;},loadTop() {//下拉刷新 模拟数据请求这里为了方便使用一次性定时器this.handleTopChange("loading");//下拉时 改变状态码this.pageNum = 1;this.allLoaded = false;//下拉刷新时解除上拉加载的禁用setTimeout(() => {this.list = 12;//下拉刷新 数据初始化this.handleTopChange("loadingEnd")//数据加载完毕 修改状态码this.$refs.loadmore.onTopLoaded();}, 1500);},}}

基本css样式：

.page-loadmore-wrapper {overflow: scroll;z-index: 100;}.hot-list {padding: 0 8px;}.hot-item {padding: 10px 0;}.hot-one {overflow: hidden;border-bottom: 1px dashed #ccc;}.hot-one a img {padding-right: 10px;}.hot-item a img {width: 135px;height: 90px;}.fl {float: left;}.hot-one a h5 {margin-top: 2px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 6px;font-size: 16px;color: #000;}.hot-one a p {font-size: 12px;color: #828282;margin: 0 0 3px;}.color_e85647 {color: #e85647;}div.hot-list > div:first-child .img-box {overflow: hidden;}div.hot-list > div:first-child img {width: 100%;height: auto;padding-right: 0;}

写完这些  基本上就能够实现上拉加载下拉刷新的功能了  然后就是在事件里面加上网络请求把数据渲染在视图上

项目演示地址：http://mint.wkmblog.com/LoadMore

更新日志

2019-1-6      删除多余无用代码，添加文字提示与动画提示结合(动画与文字的使用根据实际情况，也可使用默认的提示，这里只是展示用法)

      top的slot插槽和bottom的slot插槽分别修改为：

<div slot="top" class="mint-loadmore-top" style="text-align:center"><span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span><mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner><span class="mint-loadmore-text">{{ topText }}</span>
</div>
<div slot="bottom" class="mint-loadmore-bottom"><span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span><mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner><span class="mint-loadmore-text">{{ bottomText }}</span>
</div>

      data中添加数据：

topText: '',
topPullText: '下拉刷新',
topDropText: '释放更新',
topLoadingText:  '加载中...',
bottomText: '',
bottomPullText:  '上拉刷新',
bottomDropText:  '释放更新',
bottomLoadingText:  '加载中...',

      watch监听数据变化：

watch: {topStatus(val) {switch (val) {case 'pull':this.topText = this.topPullText;break;case 'drop':this.topText = this.topDropText;break;case 'loading':this.topText = this.topLoadingText;break;}},bottomStatus(val) {switch (val) {case 'pull':this.bottomText = this.bottomPullText;break;case 'drop':this.bottomText = this.bottomDropText;break;case 'loading':this.bottomText = this.bottomLoadingText;break;}}
},

此时，上拉下拉都会出现如上面三张图的动画+文字提示。

这篇关于vue基于mint-ui组件loadmore实现上拉加载更多，下拉刷新功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---