vue和mintui-Loadmore结合实现下拉刷新,上拉加载
来源:互联网 发布:淘宝上的乖乖水有用吗 编辑:程序博客网 时间:2024/06/09 21:45
mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码。
<template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <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学的不精,浪费了太多时间,引以为戒
阅读全文
3 0
- vue和mintui-Loadmore结合实现下拉刷新,上拉加载
- vuejs 使用MintUI Loadmore下拉/上拉刷新,刷新框架
- SwipeRefreshLayout和RecyclerView结合实现下拉刷新和上拉加载更多的效果
- BGARefreshLayout与ListView结合使用实现上拉刷新和下拉加载更多
- RecyclerView和SwipeRefreshLayout结合实现列表的上拉加载下拉刷新
- VUE mint-ui mt-loadmore 上拉加载
- 一个完整最少代码的上拉加载(mint-ui的loadmore 和 vue)
- SwipeRefreshLayout和RecyclerView实现下拉刷新和上拉加载
- 使用PullToRefresh实现下拉刷新和上拉加载
- 下拉刷新和上拉加载更多实现方法
- 使用PullToRefresh实现下拉刷新和上拉加载
- 使用PullToRefresh实现下拉刷新和上拉加载
- PullToRefresh实现下拉刷新和上拉加载
- PullToRefresh实现下拉刷新和上拉加载
- PullToRefresh实现下拉刷新和上拉加载
- 使用PullToRefresh实现下拉刷新和上拉加载
- PullToRefresh实现下拉刷新和上拉加载
- 使用PullToRefresh实现下拉刷新和上拉加载
- Scala入门到精通——第十二节 I/O与正则表达式
- C# 库存管理
- android中AutoLayout全新的适配方式,适配完美选择
- 网络编程之字节序对跨平台数据传输的影响
- 元首的愤怒 德英对照版 (By Google)
- vue和mintui-Loadmore结合实现下拉刷新,上拉加载
- CAD(dxf)、SHP、KML数据加载并套合到卫星图像上(坐标校准)
- 2017年5-6月面试总结
- 集合之间插入字符(例如逗号)StringUtil.join
- 使用深度学习打造智能聊天机器人
- 超简单实现JavaScript在线编译器
- 栈与调用惯例
- Unity3D : 判断字符串是否含有中文 (C#)
- FFMPEG类库打开流媒体的方法(需要传参数的时候)——设置打开参数