未加星标

结合mint-ui移动端下拉加载实践方法总结

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

1.npm i mint-ui -S

2.main.js中引入import 'mint-ui/lib/style.css'

3.以下是代码结构部分:

<template>
<div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
<v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
<ul class="list">
<li v-for="(item, index) in proCopyright">
<div>{{item.FZD_ZPMC}}</div>
</li>
</ul>
</v-loadmore>
</div>
</template>
<script>
import {Loadmore} from 'mint-ui';
export default {
components:{
'v-loadmore':Loadmore,
},
data () {
return {
pageNo:1,
pageSize:50,
proCopyright:[],
allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了
scrollMode:"auto", //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动
totalpage:0,
loading:false,
bottomText: '',
}
},
mounted(){
this.loadPageList(); //初次访问查询列表
},
methods:{
loadBottom:function() {
// 上拉加载
this.more();// 上拉触发的分页查询
this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位
},
loadPageList:function (){
// 查询数据
this.axios.get('/copyright?key='+ encodeURIComponent('公司名称')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res =>{
console.log(res);
this.proCopyright = res.data.result.PRODUCTCOPYRIGHT;
this.totalpage = Math.ceil(res.data.result.COUNTOFPRODUCTCOPYRIGHT/this.pageSize);
if(this.totalpage == 1){
this.allLoaded = true;
}
this.$nextTick(function () {
// 是否还有下一页,加个方法判断,没有下一页要禁止上拉
this.scrollMode = "touch";
this.isHaveMore();
});
});
},
more:function (){
// 分页查询
if(this.totalpage == 1){
this.pageNo = 1;
this.allLoaded = true;
}else{
this.pageNo = parseInt(this.pageNo) + 1;
this.allLoaded = false;
}
console.log(this.pageNo);
this.axios.get('/copyright?key='+ encodeURIComponent('公司名称')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res=>{
this.proCopyright = this.proCopyright.concat(res.data.result.PRODUCTCOPYRIGHT);
console.log(this.proCopyright);
this.isHaveMore();
});
},
isHaveMore:function(){
// 是否还有下一页,如果没有就禁止上拉刷新
//this.allLoaded = false; //true是禁止上拉加载
if(this.pageNo == this.totalpage){
this.allLoaded = true;
}
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
padding:30px 0;
background-color: #ccc;
margin-bottom:20px;
}
</style>

以上这篇结合mint-ui移动端下拉加载实践方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSUCDU数据定位
分页:12
转载请注明
本文标题:结合mint-ui移动端下拉加载实践方法总结
本站链接:http://www.codesec.net/view/568421.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(17)