xmhjc-applet/pages/myinfo/notifiesPage.vue

<template>
	<view class="bg">
        <view class="notifies" @click="openDetails(item)" v-for="item in dataList" :key="item.id">
            {{item.title}}
            
        </view>

        <view class="loadmore" @click="loadmore()" >
            {{jiazaitext}}
        </view>
    </view>
</template>

<script>
import {
  notifiesPage
} from '@/http/api/common.js'
import env from "@/http/config/config.js"
import * as util from '@/pages/util/util.js'

export default {

data() {
    return {
        dataList:[],
        status:'',
        pageSize:10,
        pageNum:1,
        jiazaitext:'加载更多',
    }
},
onLoad(e) {
    this.getnotifiesPage()
},
onReachBottom() {
    this.loadmore()
},
methods: {
     //加载更多
     loadmore(){
        console.log('下拉加载',this.jiazaitext);
        if (this.jiazaitext=="加载更多") {
            this.pageNum=this.pageNum+1
            this.jiazaitext="加载中..."
            this.getnotifiesPage()
        }
    },
    async getnotifiesPage(){
        let res = await notifiesPage({
            pageSize:this.pageSize,
            pageNum:this.pageNum,
        })
        if (res.data.code == 200) {
            let newrows = res.data.data?.rows || []

            this.dataList.push(...newrows)
            
            if(this.dataList.length!=res.data.data.total){
                this.jiazaitext="加载更多"
            }else{
                this.jiazaitext="已经到底"
            }
        }
    },
    openDetails(item){
        uni.navigateTo({
             url: '/pages/myinfo/notifiesPageDetails?id=' + item.id
        });
    }
			


}
}
</script>

<style lang="scss">
.bg{
    width: 750rpx;
    height: auto;
    min-height: 100vh;
    background: #F1F1F1;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.btn{
    width: 702rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;
    margin-top: 200rpx;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
}
.loadmore{
    height:200rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    padding-top: 24rpx;
}
.notifies{
    width: 750rpx;
    min-height: 100rpx;
    line-height: 100rpx;
    background-color: white;

    text-align: left;
    font-size: 28rpx;
    margin-top: 24rpx;
    padding-left: 24rpx;
}
</style>