uniapp切换栏，切换内容带数据，上拉加载，下拉刷新，并且只显示前五条数据

 页面效果

<template>
	<view class="container">
		<view class="new-box">
			<view class="tab-title">
				<view :class="activeTabIndex==0?'active':'tab-bar'" @click="switchTab(0)">
					未读({{total}})
				</view>
				<view :class="activeTabIndex==1?'active':'tab-bar'" @click="switchTab(1)">
					已读({{total2}})
				</view>
			</view>
			<scroll-view class="scroll" :scroll-y="true" :refresher-enabled="true" :refresher-threshold="100"
				:scroll-top="scrollTop" :refresher-triggered="triggered" @refresherrefresh="refresh"
				@scrolltolower="lower">
				<view class="list">
                    <!-- 只显示几条数据，newList后面加上.slice(0,5)，这里设置为5是只显示5条数据--> 
					<view class="con" v-for="(item2,index2) in newList" :key="index2" @click="changeDetails(item2.id)">
						<view class="new-text">
							{{item2.templateNickname?item2.templateNickname:'无'}}：{{item2.templateContent?item2.templateContent:'无'}}
						</view>
						<view class="new-txt">
							{{formatDate(item2.createTime?item2.createTime:'无')}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 切换栏
				activeTabIndex: 0,
                //页面传参
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					readStatus: false, //默认未读
				},
				total: '',
				total2: '',
				triggered: false, //下拉刷新状态
				//newList: [],
                newList: [{
						templateNickname: '系统通知',
						templateContent: '通知测试通知测试通知测试通知测试通知测试',
						createTime: '2024-4-3 14:17:4'
					},
					{
						templateNickname: '系统通知',
						templateContent: '通知测试通知测试通知测试通知测试通知测试',
						createTime: '2024-4-3 14:17:4'
					}, {
						templateNickname: '系统通知',
						templateContent: '通知测试通知测试通知测试通知测试通知测试',
						createTime: '2024-4-3 14:17:4'
					}, {
						templateNickname: '系统通知',
						templateContent: '通知测试通知测试通知测试通知测试通知测试',
						createTime: ''
					}
				],
                //点击tab时内容在最顶层
				scrollTop: 0,
			}
		},
		onShow() {
            // 初始调用接口
			this.getUnreadNews()
			this.getReadNews()
		},

		methods: {
			// 页面下滑事件
			refresh: function(e) {
				this.triggered = true;
				this.getReadNews()
			},
			// 翻页事件
			lower: function(e) {
				this.getReadNewsList()
			},

						switchTab(index) {
				this.activeTabIndex = index;
				 //根据选中值调用接口
				if (this.activeTabIndex == 0) {
					this.getReadNews()
					this.scrollTop = 0

				} else if (this.activeTabIndex == 1) {
					this.getReadNews()
					// 切换内容在最顶层
					this.scrollTop = this.scrollTop === 0 ? '1' : '0'
				}
			},
			getReadNews() {
				// this.queryParams.pageNo = 1
				// if (this.activeTabIndex == 0) {
				// 	//消息状态  readStatus = true已读  readStatus = false未读
				// 	this.queryParams.readStatus = false
				// 	//在这里调用接口，这里的接口是我项目里的，需要改为自己项目的接口
				// 	getMyNotifyMessagePage(this.queryParams).then(res => {
				// 		this.newList = res.data.list;
				// 		this.total = res.data.total
				// 		this.triggered = false
				// 		uni.stopPullDownRefresh()
				// 	})
				// } else {
				// 	this.queryParams.readStatus = true
				// 	//在这里调用接口，这里的接口是我项目里的，需要改为自己项目的接口
				// 	getMyNotifyMessagePage(this.queryParams).then(res => {
				// 		this.newList = res.data.list;
				// 		this.total2 = res.data.total
				// 		this.triggered = false
				// 		uni.stopPullDownRefresh()
				// 	})
				// }
			},
			// 翻页
			getReadNewsList() {
				// this.queryParams.pageNo += 1
				// if (this.activeTabIndex == 0) {
				// 	this.queryParams.readStatus = false
				// 	getMyNotifyMessagePage(this.queryParams).then(res => {
				// 		if (res.data.list.length == 0) {
				// 			this.queryParams.pageNo--;
				// 			uni.showToast({
				// 				icon: 'error',
				// 				title: '没有更多数据',
				// 				duration: 2000
				// 			});
				// 		} else {
				// 			this.newList = this.newList.concat(res.data.list);
				// 		}
				// 	})
				// } else {
				// 	this.queryParams.readStatus = true
				// 	getMyNotifyMessagePage(this.queryParams).then(res => {
				// 		if (res.data.list.length == 0) {
				// 			this.queryParams.pageNo--;
				// 			uni.showToast({
				// 				icon: 'error',
				// 				title: '没有更多数据',
				// 				duration: 2000
				// 			});
				// 		} else {
				// 			this.newList = this.newList.concat(res.data.list);
				// 		}
				// 	})
				// }

			},
            //页面初始调用，只赋值tab数据
			getUnreadNews() {
				this.queryParams.readStatus = true
				getMyNotifyMessagePage(this.queryParams).then(res => {
					this.total2 = res.data.total
				})
			},
			formatDate(value) {
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},
			changeDetails(id) {
                //获取id，跳转详情页获取对应数据
				console.log(id)
				uni.navigateTo({
					url: `/page_mine/news/details/index?id=` + id
				})
			},
		}
	}
</script>

<style scoped>
    .container {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        width: 100vw;
        min-height: 100vh;
    }
	.new-box {
		/* background-color: #FFFFFF; */
		/* padding: 20rpx; */
	}

	.scroll {
		height: 88vh;
	}

	.tab-title {
		display: flex;
		position: relative;
		border-bottom: 2rpx solid #e7e7e7;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.tab-bar {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		cursor: pointer;
		text-align: center;
		padding: 0 20rpx;
		font-weight: 500;
	}

	.active {
		font-weight: bold;
		font-size: 28rpx;
		width: 150rpx;
		text-align: center;
		/* color: #2A82E4; */
		color: rgba(131, 99, 255, 1);
		line-height: 80rpx;
		padding: 0 20rpx;
	}

	.list {
		padding: 20rpx;

	}

	.con {
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.new-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		/* 设置最大显示行数 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		line-height: 80rpx;

	}

	.new-txt {
		font-size: 28rpx;
		font-weight: 500;
		color: #999;
		line-height: 75rpx;
	}

	/* 消息模块  end */
</style>