结合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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
js上传图片预览的实现方法
May 09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
浅析Vue 防抖与节流的使用
Nov 14 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 字符串函数收集
2010/03/29 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python可迭代对象操作示例
2019/05/07 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python学生管理系统的实现
2020/04/05 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
乔迁之喜主持词
2014/03/27 职场文书
《画风》教学反思
2014/04/16 职场文书
暑假学习心得体会
2014/09/02 职场文书
小学生手册家长意见
2015/06/03 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
小学作文之描写天气
2019/08/15 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
python四种出行路线规划的实现
2021/06/23 Python