结合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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
vue实现购物车列表
Jun 30 Javascript
手把手教你如何编译打包video.js
Dec 09 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
庆祝教师节活动方案
2014/01/31 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
公司回复函格式
2015/07/14 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书