Vue(小案例_vue+axios仿手机app)_上拉加载

---恢复内容开始---

一、前言                                                                                   

                                            1、使用mint-ui实现上拉加载

                                            2、出现的坑(当按住鼠标左键然后拖动,会进入一个检测机制)

二、主要内容                                                                            

1、使用mint-ui实现上拉加载

  (1)请求的数据格式

地址

/api/getgoods?pageindex=number

作用描述

获取商品列表展示页面中的所有数据

请求方式

Get

传入api的参数

pageindex: 页码

获取第一页数据写法:/api/getgoods?pageindex=1

返回数据格式

Json

   
 

  (2)在结构中定义到mt-loadmore结构

 <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul>
            <li v-for="(goods, index) in goodslist">
               .....省略
            </li>       
        </ul>
    </mt-loadmore>

  (3)在script中定义上面的这些方法,如下:

 data(){
            return {
                page:this.$route.params.page,
                goodsList:[],
                allLoaded:false,//当你的数据加载完了之后,要将这里改成true,让他不要上拉加载了    
            }
        },
 methods:{
            loadBottom(){
                console.log('上拉调用了');
                //通知状态改变
               this.$refs.loadmore.onBottomLoaded()//通知不要在上拉加载了
            },
            //状态改变
            handleBottomChange(status){
                console.log(status);//这里有三个状态--------------当用滚轮滑动的时候输出为pull, 向上拉的时候为drop,  加载的时候为loading
            }
        }

  (5)当数据请求完成后需要给用户一个提示,并且不再进行上拉加载

 methods:{
            loadBottom(){
                console.log('上拉调用了');
                //通知状态改变
               // console.log(this);
                //上拉加载数据,调用数据加载方法
                this.loadGoodByPage()
            },
            //状态改变
            handleBottomChange(status){
                console.log(status);
            },
//封装加载图片的方法 loadGoodByPage(){ /* this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')*/ this.$axios.get(`getgoods/?pageIndex=${this.page}`); .then(res=>{ //如果这次请求请求到的数据小于10条了,提示给用户没有数据了 if(res.data.result.data<10){ this.$toast('没有数据了'); //如果为true,表示所有的数据都加载完成了 this.allLoaded=true; } if(this.page==1){ this.goodsList = res.data.message; }else{ this.goodsList = this.goodsList.concat(res.data.message); } this.page++; }) .catch(err=>{ console.log('请求的数据有误') }) } }, created(){ //组件创建完成的时候调用,加载第一页数据 loadGoodByPage() }

(4)测试如下

                            

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在上面看是已经实现了上拉加载的方法,但是还存在一些坑

当我们用鼠标左键按住向上推动的时候,会发现有很难推动的情况,而且我们稍微一推动,他就会提示没有数据了

1、自动检测机制:

  loadmore在初始化时会自动检测他的高度是否能够撑满器容器,如果不能则会调用bottom-method,知道撑满容器为止,如果不希望用这一机制,可以将auto-fill设为false

2、该现象产生的原因

  (1)当用户按住鼠标左键的时候会触发 TouchBegin和TouchEnd 当这两个距离在一定的值的时候,就会进入一个检测机制。

  (2)当内容区域距离设备底部有一定高度的时候就会触发loadmore()

 

  

   (3)进入这个检测区域的条件是:卷起的高度 + 可视区(内容) = 设备总高度

 3、解决方法

  (1)不要让:推动的距离 + 可视区的距离  >  容器的高度

       (2)参考官网的例子:在mounted()生命周期函数里面加入如下

 mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;  

//this.wrapperHeight可视区的高度 // this.$refs.wrapper.getBoundingClientRect().top卷起的高度 //设备的高度 }

  (3)定义结构如下

<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
     .....省略
    </mt-loadmore>
            
        </div>

  (4)在data中关掉这个检测机制

 data(){
            return {
                page:this.$route.params.page,
                goodsList:[],
                allLoaded:false,//当你的数据加载完了之后,要将这里改成true,让他不要上拉加载了    
                autoFill:false
            }
        }

三、总结                                                                                   

官网实例:https://github.com/ElemeFE/mint-ui/blob/master/example/pages/pull-up.vue

官网文档:http://mint-ui.github.io/docs/#/en2/loadmore

mt-loadmore 中的属性

1.bottomload函数:通知全部组件

2.机制:bottomLoad: bottom-all-loaded 默认为false(可以上拉),true禁止上拉

3.auto-fill默认为true, 自动检测父容器,并调用bottomload直到撑满父容器

4.pull 上拉具体小于70px ,drop 上拉距离=70px, loading加载中

5.loadmore组件对象的onBottomLoaded()通知结束loading进入pull状态

6.在组件上谢ref在js中通过this.$refs.xxx获取组件对象

   在普通表签上写ref获取的是dom对象

---恢复内容结束---

虽然现在走得很慢,但不会一直这么慢
原文地址:https://www.cnblogs.com/xxm980617/p/10702566.html