微信小程序_uni-app_分页组件_scroll-view

写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目

1 分页组件_scroll-view_ _简介

使用scroll-view标签充当容器，滚动条触底事件：scrolltolower

触底时，判断有无下一页，如果有，请求下一页，将新数据拼接到原数组后(arr1=[…arr1 , …arr2])，如果没有，提示

2 使用

2.1 布局容器

① 将最外层的容器标签改为scroll-view,并添加scroll-y

② 给最外层的容器定义高度=屏幕的高度 - 标题的高度，注意在小程序中，底部的按钮tabbar不属于屏幕范围

height: calc(100vh - 36px);

template代码：

 <scroll-view scroll-y class="outer_wrapper" @scrolltolower="handleScrollToLower">
     <!--菜品列表，z-->
     <card-item :cardList="dishList"></card-item>
</scroll-view>

2.2 处理数据

给scroll-view标签添加触底事件 @scrolltolower=“handleScrollToLower”，每次触底时，重新请求列表，此时请求参数中，skip+=limit，并且将res拼接到原来的数组后，添加一个标志位，判断是否有下一页，如果有则加载，没有则提示用户

① 触底事件代码：

handleScrollToLower(){
    // console.log("触底了");
    /**
    * 1. skip+=limit
    * 2. 重新请求新数据
    */
    if(this.haveNextPage){
        this.params.skip+=this.params.limit;
        this.getList();
    }else {
        // 提示用户没有数据来
        uni.showToast({
            title:"到底了",
            icon:"none"
        })
    }
},

② 数据拼接，假如说要将arr2添加到arr1后

arr1=[…arr1 , …arr2]