bnyer-cloud-hub/pages-userInfo/notice/notice.vue

<template>
	<view class="container">
		<uni-list border-full v-for="(item,index) in noticeList" :key="index">
			<uni-list-item showArrow clickable :title="item.title" :note="item.createTime" :thumb="item.img"
				thumb-size="lg" @click="targetToDetail(item.id)" />
		</uni-list>
    <!-- 显示加载中或者全部加载完成 -->
    <view>
      <uni-load-more :status="loadStatus"></uni-load-more>
    </view>
  </view>
</template>

<script>
	import {
		getNoticeList
	} from '@/api/userInfo.js'
	export default {
		data() {
			return {
				noticeList: [],
				pageSize: 10,
				pageNum: 1,
				flag: false,
				userInfo:{},
        loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
        isLoadMore:false,  //是否加载中
			}
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				console.log('havent userInfo')
				uni.showModal({
					content: '艺术家账户过期,请重新登录！',
					showCancel: false,
					success() {
						//没有缓存则跳转登录页面
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				});
			} else {
				this.userInfo = userInfo;
				console.log('have userInfo')
			}
			this.getNoticeList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.noticeList = []
			this.getNoticeList()
			uni.stopPullDownRefresh()
		},
		// 上划加载更多
		onReachBottom(e) {//上拉触底函数
      if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
        this.isLoadMore=true
        if (this.loadStatus === "more") {
          this.pageNum += 1  //每次上拉请求新的一页
          this.getNoticeList();
        }
      }
		},
		methods: {

			// 获取公告分页
			async getNoticeList() {
				let that = this;
        this.loadStatus = 'loading';
				const res = await getNoticeList({
					pageSize: that.pageSize,
					pageNum: that.pageNum,
				})
				//console.log('res', res)
				if (res.data.code === 200) {
					that.noticeList.push(...res.data.rows)
					//console.log('noticeList', that.noticeList)
          if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
            that.isLoadMore = true
            that.loadStatus = 'noMore'
          }else{
            this.loadStatus = 'more';
            that.isLoadMore = false
          }
				} else {
					uni.showModal({
						content: '公告列表加载失败！',
						showCancel: false
					});
          that.isLoadMore = false
          if(that.page > 1){
            that.page -= 1
          }
				}
			},

			targetToDetail(id) {
				// console.log('id', id)
				if (id) {
					uni.navigateTo({
						url: 'noticeDetail?id=' + id
					})
				}
			}
		},
	}
</script>
<style lang="scss">
page {
  height: 100vh;
  background-color: $uni-bg-color;
}
</style>
<style lang="scss" scoped>
.container {
  width: 670rpx;
  margin: 20rpx auto;

  ::v-deep .uni-list {
    background: $uni-bg-base-color !important;
    margin-bottom: 20rpx;
    border-radius: 24rpx;
    overflow: hidden;
  }

  ::v-deep .uni-list-item {
    background: $uni-bg-base-color !important;
  }

  ::v-deep .uni-list--border-top {
    display: none !important;
  }
  ::v-deep .uni-list--border-bottom {
    display: none !important;
  }

  ::v-deep .uni-list-item__content-title {
    color: $uni-white !important;
  }

  ::v-deep .uni-list-item__content-note {
    color: $uni-secondary-color !important;
  }

}
	.ivOver{
		width: 100%;
		height:100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #fff;
		font-size: 20rpx;
	}
</style>