结合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 实现Tab效果 思路是js思路
Mar 02 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 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中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php处理复杂xml数据示例
2016/07/11 PHP
Nginx实现反向代理
2017/09/20 Servers
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
详解Python pygame安装过程笔记
2017/06/05 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
平民服装店创业计划书
2014/01/17 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
法学院毕业生求职信
2014/06/25 职场文书
财会专业大学生求职信
2014/09/26 职场文书
团队拓展训练感想
2015/08/07 职场文书
电台广播稿范文
2015/08/19 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
解决 redis 无法远程连接
2022/05/15 Redis