结合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 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
react中使用swiper的具体方法
May 15 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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
配置支持SSI
2006/11/25 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
后勤工作职责
2013/12/22 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
班组长安全工作职责
2014/07/15 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
关于幸福的感言
2015/08/03 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
听课评课活动心得体会
2016/01/15 职场文书