当前位置:首页 > vue技术文章 > vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

vue和mintui-Loadmore结合实现下拉刷新上拉加载实例效果

  • 发布时间:
  • 作者:码农之家原创
  • 点击:135

这篇文章主要知识点是关于vue、mint、ui、loadmore、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF作者:肖睿
立即下载

vue mintui-Loadmore结合实现下拉刷新和上拉加载示例

mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码。

<template> 
 <div class="main-body" :> 
  <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> 
   <ul class="list" v-for="(val, key) in pageList"> 
    <li> 
     <div>我是小11</div> 
     <div>我是小11</div> 
    </li> 
   </ul> 
  </v-loadmore> 
 </div> 
</template> 
<script> 
 import {Loadmore} from 'mint-ui'; 
 export default { 
  data:function() { 
   return { 
    searchCondition:{ //分页属性 
     pageNo:"1", 
     pageSize:"10" 
    }, 
    pageList:[], 
    allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了 
    scrollMode:"auto" //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动 
   } 
  }, 
  components: { 
   'v-loadmore':Loadmore // 为组件起别名,vue转换template标签时不会区分大小写,例如:loadMore这种标签转换完就会变成loadmore,容易出现一些匹配问题 
               // 推荐应用组件时用a-b形式起名 
  }, 
  mounted(){ 
   this.loadPageList(); //初次访问查询列表 
  }, 
  methods: { 
   loadTop:function() { //组件提供的下拉触发方法 
    //下拉加载 
    this.loadPageList(); 
    this.$refs.loadmore.onTopLoaded();// 固定方法,查询完要调用一次,用于重新定位 
   }, 
   loadBottom:function() { 
    // 上拉加载 
    this.more();// 上拉触发的分页查询 
    this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位 
   }, 
   loadPageList:function (){ 
     // 查询数据 
    this.api.PageList(this.searchCondition).then(data =>{ 
     // 是否还有下一页,加个方法判断,没有下一页要禁止上拉 
     this.isHaveMore(data.result.haveMore); 
     this.pageList = data.result.pageList; 
     this.$nextTick(function () { 
      // 原意是DOM更新循环结束时调用延迟回调函数,大意就是DOM元素在因为某些原因要进行修改就在这里写,要在修改某些数据后才能写, 
      // 这里之所以加是因为有个坑,iphone在使用-webkit-overflow-scrolling属性,就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果, 
      // 花了好久才解决这个问题,就是用这个函数,意思就是先设置属性为auto,正常滑动,加载完数据后改成弹性滑动,安卓没有这个问题,移动端弹性滑动体验会更好 
      this.scrollMode = "touch"; 
     }); 
    }); 
   }, 
   more:function (){ 
     // 分页查询 
    this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1; 
    this.api.loadPageList(this.searchCondition).then(data=>{ 
     this.pageList = this.pageList.concat(data.result.pageList); 
     this.isHaveMore(data.result.haveMore); 
    }); 
   }, 
   isHaveMore:function(isHaveMore){ 
    // 是否还有下一页,如果没有就禁止上拉刷新 
    this.allLoaded = true; //true是禁止上拉加载 
    if(isHaveMore){ 
     this.allLoaded = false; 
    } 
   } 
  } 
 } 
</script> 

花了点时间整理了下代码,复制后改改就能用了,当然你要有基本的vue开发框架,并且有点开发基础,代码很简单,这个插件很好用,效果不错,加载时的文字什么的可以自己修改,比如增加箭头什么的,可以看文档。

PS:有个坑一定要注意就是注释里说的iPhone里loadmore和-webkit-overflow-scrolling属性冲突无法上拉问题,还是vue学的不精,浪费了太多时间,引以为戒

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

分享三种取消选中单选框radio的方法

使用vue实现简单键盘 支持移动端和pc端示例效果

PHP接收二进制流转换成图片实例解析

mysql分表和分区有什么区别

python pip和anaconda包的安装

展开 +

收起 -

vue 相关电子书
学习笔记
网友NO.363919

解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题

所遇问题: 该页面为双选项卡联动,四个部分都需要上拉加载和下拉刷新功能,使用的mint-ui的loadmore插件,分别加上上拉加载后,只有最后一个的 this.$refs.loadmore.onTopLoaded(); 和 this.$refs.loadmore.onBottomLoaded(); 有效,其他的三个都无效,这两句话是意思是查询完要调用一次,用于重新定位 分析原因: 首先这四个模块都是用的 mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" ul class="ul-box" li class="list-cell ta-line" v-for="(item,index) in gridNoPayMail" :key="item+'walletdetail1'" @click="choose(index)" div class="checkboxOne" input type="checkbox" name="checkInput" :id="'id1' + index" v-model="item.checked" disabled/ label :for="'id1' + index"/label /div div class="left-text" p class="award"{{item.a}}/p p class="time"{{item.b}}/p /div div class="right-text" p class="addinfo"¥{{item.c}}/p /div /li /ul /mt-loadmore top-method和……

网友NO.246919

vue2 mint-ui loadmore实现下拉刷新,上拉更多功能

mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体代码如下所示: template div class="page-loadmore" h1 class="page-title"Pull up/h1 p class="page-loadmore-desc"在列表底部, 按住 - 上拉 - 释放可以获取更多数据/p p class="page-loadmore-desc"translate : {{ translate }}/p div class="loading-background" : translateScale : {{ moveTranslate }} /div div class="page-loadmore-wrapper" ref="wrapper" : mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore" ul class="page-loadmore-list" li v-for="item in list" class="page-loadmore-listitem"{{ item }}/li /ul div slot="top" class="mint-loadmore-top" span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus ……

网友NO.203526

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

本文介绍了vue mint-ui源码解析之loadmore组件,分享给大家,具体如下: 接入 官方接入文档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" 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-ali……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757