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

 更新时间:2017年11月08日 10:14:30   投稿:jingxian  
下面小编就为大家带来一篇结合mint-ui移动端下拉加载实践方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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移动端下拉加载实践方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解在vue中如何使用node.js

    详解在vue中如何使用node.js

    这篇文章主要给大家介绍了关于在vue中如何使用node.js的相关资料,vue和nodejs经常让新手们感到困惑,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Vue事件获取事件对象之event.currentTarget详解

    Vue事件获取事件对象之event.currentTarget详解

    这篇文章主要介绍了Vue事件获取事件对象之event.currentTarget,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue路由导航守卫和请求拦截以及基于node的token认证的方法

    vue路由导航守卫和请求拦截以及基于node的token认证的方法

    这篇文章主要介绍了vue路由导航守卫和请求拦截以及基于node的token认证的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • el-form resetFields无效和validate无效的可能原因及解决方法

    el-form resetFields无效和validate无效的可能原因及解决方法

    本文主要介绍了el-form resetFields无效和validate无效的可能原因及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue实现select下拉显示隐藏功能

    vue实现select下拉显示隐藏功能

    这篇文章主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Axios在vue项目中的封装步骤

    Axios在vue项目中的封装步骤

    Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js,是一个第三方插件,第三方异步请求工具库,这篇文章主要介绍了Axios在vue项目中的封装方法,需要的朋友可以参考下
    2022-10-10
  • VSCode插件安装完成后的配置(常用配置)

    VSCode插件安装完成后的配置(常用配置)

    这篇文章主要介绍了VSCode插件安装完成后的配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Vue项目全局配置页面缓存之按需读取缓存的实现详解

    Vue项目全局配置页面缓存之按需读取缓存的实现详解

    这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-08-08
  • vue2.0使用md-edit编辑器的过程

    vue2.0使用md-edit编辑器的过程

    这篇文章主要介绍了vue2.0+使用md-edit编辑器的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-02-02
  • vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不推荐)

    vue中v-if和v-for一起使用的弊端及解决办法(同时使用 v-if 和 v-for不

    当 v-if 和 v-for 同时存在于一个元素上的时候,v-if 会首先被执行,这篇文章主要介绍了vue中v-if和v-for一起使用的弊端及解决办法,需要的朋友可以参考下
    2023-07-07

最新评论