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


Posted in Javascript onNovember 08, 2017

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之对系统的toFixed()方法的修正
May 08 Javascript
JavaScript表单常用验证集合
Jan 16 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
Vue.js快速入门教程
Sep 07 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
javascript实现评分功能
Jun 24 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 #Javascript
thinkjs 文件上传功能实例代码
Nov 08 #Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
在React 组件中使用Echarts的示例代码
Nov 08 #Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 #Javascript
es6在react中的应用代码解析
Nov 08 #Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
js快速排序的实现代码
2013/12/08 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的pprint折腾记
2015/01/21 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python玩转Excel的读写改实例
2019/02/22 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
家长对老师的感言
2014/03/11 职场文书
励志演讲稿600字
2014/08/21 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
普通党员整改措施
2014/10/24 职场文书
单位接收函格式
2015/01/30 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书