uniapp 小程序 列表下拉

<template>
    <view class="container">
        <view class="top-fixed">
            <view style="padding:30rpx 30rpx;">
                <view class="search">
                    <u-search placeholder="搜索课程"  shape="square" :show-action="false" :disabled="true" height="74" @click="$fun.gopage('/pages/arc/search')">
                    </u-search>
                </view>
                <view class="menu">
                    <view class="lk" v-for="(item,index) in menu" @click="menuChoose(item.id)"  :key="index" :class="listmap.channel==item.id?'checked':''">{{item.title}}</view>
                </view>
            </view>
            <view class="border"></view>
            <view class="sx-box">
                <view class="lk" @click="orderbyTab('id')" :class="{cur:listmap.orderby == 'id'}">
                    最新 <image src="../../static/images/icon_01.png" class="ico" mode=""></image>
                </view>
                <view class="lk" @click="orderbyTab('views')" :class="{cur:listmap.orderby == 'views'}">
                    热度 <image src="../../static/images/icon_01.png" class="ico" mode=""></image>
                </view>
            </view>
        </view>

        <view style="padding:0 30rpx 30rpx;">
            <view class="kc-list">
                <view class="item" v-for="(item,index) in list" :key="index"  @click="$fun.gopage('/pages/arc/view?id='+item.id)">
                    <image :src="item.image" class="img" mode="aspectFill"></image>
                    <view class="info">
                        <view class="title clamp">{{ item.title }}</view>
                    </view>
                </view>
            </view>
            <view class="loadmore">
                <u-loadmore :status="status" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                    
                menu:[],
                listmap:{
                    page: 1,
                    channel: "",
                    orderby:'id'
                },
                list:[],
                last_page:0,
                status:'loadmore',
            }
        },
        onShow() {
            console.log(this.$fun.getParam('id'),"getdb_id")
            this.listmap.channel=this.$fun.getParam('id') ? this.$fun.getParam('id') :0;
            this.getCategory();
            this.getlist(true)
        },
        methods: {
            menuChoose(e) {
                this.listmap.channel = e
                this.getlist(true);
            },
            orderbyTab(e) {
                this.listmap.orderby = e
                this.getlist(true);
            },
            getCategory() {
                this.$api.getCategory().then(res => {
                    if (res.code == 1) {
                        this.menu=res.data;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            getlist(re) {
                if(re){
                    this.list=[];
                    this.listmap.page=1;
                }
                this.status="loading";
                this.$api.getArchives(this.listmap).then(res => {
                    this.status="loadmore";
                    if (res.code == 1) {
                        if(re){
                            this.list=res.data.pageList.data;
                        }else{
                            this.list = this.list.concat(res.data.pageList.data);
                        }
                        this.last_page=res.data.pageList.last_page;
                        if(res.data.pageList.total==0){
                            this.status="nomore"
                        }
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            loadMoreData() {
                if (this.listmap.page < this.last_page) {
                    console.log("load...")
                    this.listmap.page++; // 增加页码
                    this.getlist(false)
                }else{
                    console.log("loadok")
                    this.status="nomore";
                }
            },
        },
        
        onReachBottom(){
            this.loadMoreData();
        }
    }
</script>