mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里只用了Loadmore功能实现移动端的上拉分页刷新,下拉加载数据,废话不说上代码。
@H_
301_13@
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;
}
}
}
}
花了点时间整理了下代码,复制后改改就能用了,当然你要有基本的vue开发框架,并且有点开发基础,代码很简单,这个插件很好用,效果不错,加载时的文字什么的可以自己修改,比如增加箭头什么的,可以看文档。
PS:有个坑一定要注意就是注释里说的iPhone里loadmore和-webkit-overflow-scrolling属性冲突无法上拉问题,还是vue学的不精,浪费了太多时间,引以为戒
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。