uniapp滑动页面切换和下拉刷新，触底加载更多（swiper + scroll-view）

因为官方文档乱七八糟的，所以自己来总结下

需求：

常见的上方tag标签切换，下方是页面，上面点击切换，下面页面也切换，下方列表有下拉刷新，触底加载更多

因为这两个组件都是固定高度的，所以没办法用页面的触底，

因为有的页面不是列表，所以没办法用uniapp的下拉页面刷新生命周期

所以用uniapp的swiper轮播图来切换，轮播图固定高度，里面列表用 scroll-view来做下拉刷新和触底加载更多

代码：

开头有用到uviewUI框架的u-navbar头部，不需要的可以自己删了

<template>
	<view class="pastureWater">
		<u-navbar title="牧场用水管理" bgColor="#4f9a47" :placeholder="true" />
		<view class="tagList">
			<view class="item" v-for="(item, index) in tagList" :key="index" :class="{active: tagActive === index}"
				@click="tagActive = index">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="swiperBox">
			<swiper class="swiper" :current="tagActive" @change="swiperChange">
				<swiper-item class="swiperItem">
					<view class="search">
						<view class="formItem">
							<text>监管类型：</text>
							<text>生活区</text>
						</view>
						<view class="formItem">
							<text>牛舍：</text>
							<text>1-1区</text>
						</view>
					</view>
					<div class="listBox">
						<scroll-view class="list" scroll-y="true" :lower-threshold="0" :throttle="false"
							:refresher-enabled="true" :refresher-triggered="triggered" refresher-background="#f8f4f3"
							@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
							<view class="item" v-for="(item, index) in 2" :key="index">
								<view class="itemList">
									<view class="cell">
										<text>设备编号：232436020043</text>
									</view>
									<view class="cell">
										<text>设备名称：1号牛舍电表</text>
									</view>
									<view class="cell">
										<text>当前总电能：8320.4</text>
									</view>
									<view class="cell">
										<text>时间：2024-01-09 12:12:12</text>
									</view>
									<view class="cell">
										<text>在线状态：在线</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</div>
				</swiper-item>
				<swiper-item class="swiperItem">
					<view>数据分析</view>
				</swiper-item>
				<swiper-item class="swiperItem">
					<view>历史数据</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: ['用水设备', '数据分析', '历史数据'],
				tagActive: 0,
				triggered: false,
				deviceList: [],
				historicalDataList: [],
			}
		},
		onLoad() {},
		methods: {
			scroll(item) {
				console.log(item);
			},
			swiperChange(info) {
				this.tagActive = info.target.current
			},
			// 触底加载更多
			scrolltolower() {
				console.log('触底加载更多');
			},
			// 下拉刷新
			refresherrefresh() {
				console.log('下拉刷新');
				this.triggered = true;
				setTimeout(() => {
					this.triggered = false;
				}, 3000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pastureWater {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f8f4f3;

		/deep/ uni-text.u-icon__icon.uicon-arrow-left {
			color: #fff !important;
		}

		/deep/ .u-line-1.u-navbar__content__title {
			color: #fff;
		}

		.tagList {
			display: flex;
			height: 80rpx;
			background-color: #fff;
			margin-bottom: 16rpx;

			.item {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-bottom: 4rpx solid transparent;

				&.active {
					color: #9dbc67;
					border-bottom: 4rpx solid #9dbc67;
				}
			}
		}

		.swiperBox {
			flex: 1;
			display: flex;
			flex-direction: column;

			.swiper {
				height: 100%;

				.swiperItem {
					height: 100%;
					display: flex;
					flex-direction: column;
					padding: 0 20rpx;

					.search {
						display: flex;

						.formItem {
							height: 76rpx;
							width: 50%;
							display: flex;
							align-items: center;
							padding: 0 20rpx;

							text {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 0 10rpx;
								height: 60rpx;
								line-height: 1.05;
								font-size: 28rpx;

								&:last-child {
									flex: 1;
									background-color: #fff;
									border-radius: 5rpx;
								}
							}
						}
					}

					.listBox {
						height: calc(100% - 76rpx);

						.list {
							height: 100%;

							.item {
								margin-bottom: 16rpx;
								border-radius: 10rpx;
								padding: 20rpx 20rpx 10rpx;
								background-color: #fff;

								&:last-child {
									margin-bottom: 0;
								}

								.itemList {
									display: flex;
									flex-wrap: wrap;

									.cell {
										width: 50%;
										font-size: 24rpx;
										color: #000;
										margin-bottom: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>