<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>