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对象

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

巴特西

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

最新文章

热门文章