小程式列表頁上滑載入更多配合 Laravel 分頁

<template>
    <view>

        <view v-for="(list, index) in lists" :key="index">
            <view v-for="(item, index2) in list" :key="index2" @tap="func" :data-id="item.id">

            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                currentPage:1,
                hasMore:true,
                lists:[],
            }
        },
        onShow() {
            this.queryList();
        },
        methods: {
            onReachBottom:function(){
                if(!this.hasMore){uni.showToast({icon:'none',title: '沒有更多了',duration:2000});return;}
                this.queryList(true);
            },
            queryList: function(loadMore=false)
                this.hasMore = true;
                let page = this.currentPage;
                if(loadMore){ page = ++this.currentPage }else{ page = 1; this.currentPage =1;}

                this.$http.get('',{params:{page:page}}).then(res=>{
                    let data = res.data.data;
                    if(data.pageinfo.total == 0){this.lists = [];return;}
                    if(!loadMore){this.lists = []}
                    this.lists.splice(page-1,0,data.list);
                    this.currentPage = data.pageinfo.current_page;
                    if(Number(data.pageinfo.current_page) >= Number(data.pageinfo.last_page)){
                        this.hasMore = false;
                    }
                }).catch(err=>{

                })
            },
            func : function(e){
                let id = e.currentTarget.dataset.id;
            }
        }
    }
</script>

<style></style>

laravel

public function list(){

        $records = List::where('is_del',0)->orderBy('id','desc')->paginate(10);

        $list = $records->toArray()['data'];

        return Y::json([
            'list'     => $list,
            'pageinfo' => [
                'total'        => $records->total(),
                'per_page'     => $records->perPage(),
                'current_page' => $records->currentPage(),
                'last_page'    => $records->lastPage(),
            ]
        ]);
    }

本作品採用《CC 協議》，轉載必須註明作者和本文連結