结合mint-ui移动端下拉加载实践方法总结
程序员文章站
2022-07-06 21:22:44
1.npm i mint-ui -s
2.main.js中引入import 'mint-ui/lib/style.css'
3.以下是代码结构部分:
<...
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移动端下拉加载实践方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Three.js中网格对象MESH的属性与方法详解
下一篇: 有钱了之装修村委会