uniapp 12 数据列表左右滑动分页展示实现

VUE

<view class="noticeContainer">
	<swiper v-if="eventListArr.length > 0" @change="changeNoticeListPage" v-bind:style="{'height': noticeContainerHeight}" circular :indicator-dots="indicatorDots" :interval="interval" :duration="duration">
		<swiper-item class="swiper-item" v-for="(subNoticeList, index) in eventListArr" :key="index">
			<view class="notice-item" v-for="item in subNoticeList" :key="item.id">
				<view class="notice-item-top">
					<view class="left">{{item.eventTitle}}</view>
					<view v-if="item.reviewStatus === 0" class="right reviewing">{{item.reviewStatusName}}</view>
					<view v-else-if="item.reviewStatus === 1" class="right reviewPass">{{item.reviewStatusName}}</view>
					<view v-else-if="item.reviewStatus === 2" class="right reviewRefuse">{{item.reviewStatusName}}</view>
				</view>
				<view class="notice-item-bottom">
					<view class="left">
						<text>求助金额</text>
						<view class="money">￥ {{item.reviewStatus == 1 ? item.mutualAidAmountConfirm : item.mutualAidAmount}} </view>
					</view>
					<view class="right" @click="handleClick(item.id)">查看详情</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
	<view v-else class="base-pannel" style="width: 100%; background-color: white; display: grid; place-content: center; color: lightgrey;">
		暂无数据
	</view>
</view>

JS

//根据展示条目数自动计算互助公示区域高度
let noticeContainerHeight = ref('');
/**
 * 将数组分块为指定大小的子数组集合。
 * @param {Array} array 要分块的原始数组。
 * @param {number} size 每个子数组的最大长度。
 * @returns {Array<Array>} 包含子数组的二维数组。
 */
export function chunkArray(array, size) {
	if (!Array.isArray(array) || size <= 0) {
		return [];
	}
	const result = [];
	for (let i = 0; i < array.length; i += size) {
		result.push(array.slice(i, i + size));
	}
	return result;
}

/**
 * 获取消息通知
 */
let eventList = ref([])
let eventListArr = ref([])
function getMutualEventList() {
   queryMutualEventList().then(res => {
	   eventList.value = [...res.data]
	   eventListArr.value = chunkArray(eventList.value, 3)
	   noticeContainerHeight.value = (eventListArr.value[0]?.length * 220 + 50) + 'rpx';
   });
}

/**
 * 切换公告分页时，重新计算高度
 */
function changeNoticeListPage(e) {
	console.log("changeNoticeListPage: ", e)
	const subNoticeListIndex = e.detail.current
	const subLength = eventListArr.value[subNoticeListIndex].length
	noticeContainerHeight.value = (subLength * 220 + 50) + 'rpx';
}

css

//互助公示
.noticeContainer {
	// border: 1px solid red;
	width: $base-content-width;
	swiper {
		// border: 1px solid blue;
		width: 100%;
		swiper-item {
			.notice-item {
				// border: solid 1rpx darkmagenta;
				width: 100%;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: white;
				border-radius: $base-border-radius;
				margin: 10rpx 0;
				.notice-item-top {
					// border: solid 1rpx darkmagenta;
					padding: 20rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					.left {
						// border: solid 1rpx green;
						height: 100%;
						font-weight: 1000;
					}
					.right {
						// border: solid 1rpx green;
						margin-right: 20rpx;
						// padding: 10rpx 15rpx;
						border-radius: $base-border-radius;
						width: 140rpx;
						text-align: center;
						padding: 10rpx 0;
					}
				}
				.notice-item-bottom {
					// border: solid 1rpx darkmagenta;
					width: 650rpx;
					display: flex;
					line-height: 80rpx;
					background-color: #fffdf5;
					border-radius: $base-border-radius;
					justify-content: space-between;
					padding: 0 20rpx;
					.left {
						display: flex;
						.money {
							margin-left: 20rpx;
							color: orange;
							font-size: 35rpx;
							// font-weight: bold;
						}
					}
					.right {
						color: blue;
					}
				}
			}
		
		}
	}
}