uniapp简版滚动加载以及区域滚动加载

一、滚动加载

    <order-item v-for="(item,index) in orderList" :item="item" :isHost="isHost" :key="index"></order-item>
    <view @tap="reload" class="loading-button" v-if="orderList.length == 0">  暂无订单~</view>

                pageIndex: 1,
                pageSize: 3,
                totalPage: 0,
                pages:{},

onReachBottom() {
            const {
                pageCount
            } = this.pages
            // 加载更多
            if (this.pageIndex < pageCount) {
                this.loading = true
                this.pageIndex = this.pageIndex + 1
                this.loadData()
            }
        },
methods：{    
// 加载数据
            loadData() {
                if (this.initLoading) {
                    uni.showLoading()
                }
                const {
                    pageIndex,
                    pageSize
                } = this
             
                    MemberOrderList({
                        pageIndex,
                        pageSize,
                        filter_fieldtwo: number
                    }).then(res => {
                        this.initLoading = false
                        const {
                            data,
                            ...pages
                        } = res.response
                        this.pages = pages // 记录本次请求的分页参数
                        this.loading = false
                        this.loadingFail = false
                        if(res.response!=null){
                            this.totalPage = res.response.pageCount
                            this.handlePageData(data)
                        }
                    }).catch(err => {
                        uni.hideLoading()
                        this.loading = false
                        this.loadingFail = true
                    })

            // 处理分页数据
            handlePageData(data) {
                const {
                    page = 0, pageSize = 3
                } = this.pages
                // 比较上一次获取的页码和当前获取数据的页码判断当前需要更新哪部分数据
                if (page >= this.pageIndex) {
                    this.orderList = this.orderList.slice(0, (this.pageIndex - 1) * 3).concat(data)
                } else {
                    this.orderList = this.orderList.concat(data)
                }
            },

      // 加载失败后重新加载
            reload() {
                this.loading = true
                this.loadingFail = false
                this.loadData()
            } ,

二、区域滚动加载

    <scroll-view scroll-y="true" @scrolltolower="lower()" style="height: 40vh;overflow: auto;">
            <view
                v-for="item in carList"
                :key="item.id" 
                class="car-list-item dis-flex justify-between align-center"
                @tap="chooseCar(item.id)">
                ...
            </view>
        </scroll-view> 

                carpageIndex: 1,
                carpageSize: 3,
                cartotalPage: 0,
                carpages:{},

methods：{    
            lower(e){
                const {
                    pageCount
                } = this.carpages
                // 加载更多
                if (this.carpageIndex < pageCount) {
                    this.carpageIndex = this.carpageIndex + 1
                    this.loadCarList()
                }
                console.log(this.carpageIndex,this.carpages)
            },

            loadCarList() {
                  uni.showLoading()    
                  const {
                        carpageIndex,
                        carpageSize
                    } = this
                    listCarInformationByPage({pageIndex: carpageIndex, pageSize: carpageSize, filter_fieldone: this.userId}).then(res => {
                      uni.hideLoading()
                        const {
                            data,
                            ...pages
                        } = res.response
                        let list = data.map(car => {
                          return {
                            ...car,
                            colourWord: (this.colorList.find(v => v.text == car.colour) || {}).color || '',
                                currentCar: (car.car_number==car_number?true:false)
                          }
                        })
                        this.carpages = pages // 记录本次请求的分页参数
                        this.loading = false
                        this.loadingFail = false
                        this.cartotalPage = res.response.pageCount
                        this.CarPageData(list)
                    }).catch(err => {
                      uni.hideLoading()
                    })
                }
           }

 

 

    // 处理分页数据
            CarPageData(data) {
                const {
                    page = 0, pageSize = 3
                } = this.carpages
                // 比较上一次获取的页码和当前获取数据的页码判断当前需要更新哪部分数据
                if (page >= this.carpageIndex) {
                    this.carList = this.carList.slice(0, (this.carpageIndex - 1) * 3).concat(data)
                } else {
                    this.carList = this.carList.concat(data)
                }
            },