uniapp屏幕滚动，所处对应的页码随之改变

一、视频图片效果：

视频效果

二、代码实现：

HTML部分

<template>
	<view class="container">
		<view class="current">{{current}} / {{contractPhotoLength}}</view>
		<block v-for="(item,index) in contractPhoto" :key="item.id">
			<image class="img_model" :src="item.img" mode="" @click="clickPhoto">
			</image>
		</block>
	</view>
	<view class="btn">
		<view class="btn_txt" @click="creareContract">创建合同</view>
	</view>
</template>

JavaScript部分

<script>
	export default {
		data() {
			return {
				contractPhoto: [{
						id: 11,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 22,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 121,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 111,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 141,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 145641,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					},
					{
						id: 1410,
						img: 'https://imgcdn.baogaoting.com/WordImage/2021-05-14/e84f65f40084461faff961e365c3f2ca.jpg'
					}
				],
				current: 1,
				contractPhotoLength: '',
				// 单张图片的高度
				onlyPhoto: '',
				// 单张图片的一半高度
				onlyPhotoHalf: ''
			}
		},
		onLoad() {
		},
		onReady() {
			let that = this
			// this.getContractHeight()
			let info = uni.createSelectorQuery().select(".container");
			info.boundingClientRect(function(data) {
				that.contractPhotoLength = that.contractPhoto.length;
				// 单张图片的高度
				let a = parseInt(data.height / that.contractPhotoLength)
				that.onlyPhoto = parseInt(data.height / that.contractPhotoLength)
				// 单张图片的一半高度
				let b = parseInt((data.height / that.contractPhotoLength) / 2)
				that.onlyPhotoHalf = parseInt((data.height / that.contractPhotoLength) / 2)
			}).exec()
		},
		onPageScroll(e) {
			let that = this
			const {
				onlyPhotoHalf,
				onlyPhoto
			} = this; // 从外部获取配置或提取相关值  
			let current = 1; // 初始值  

			for (let i = 0; i < that.contractPhotoLength; i++) { // 假设最多有5个分区  
				const scrollTopThreshold = onlyPhotoHalf + i * onlyPhoto;
				if (e.scrollTop > 0 && e.scrollTop <= scrollTopThreshold) {
					current = i + 1; // 设置当前分区编号  
					break; // 找到对应的分区后退出循环  
				}
			}

			this.current = current; // 设置当前值  
		},
		// onPageScroll(e) {
		// 	if (e.scrollTop > 0 && e.scrollTop < this.onlyPhotoHalf) {
		// 		this.current = 1
		// 	} else if (e.scrollTop > 0 && e.scrollTop < this.onlyPhotoHalf + this.onlyPhoto * 1) {
		// 		this.current = 2
		// 	} else if (e.scrollTop > 0 && e.scrollTop < this.onlyPhotoHalf + this.onlyPhoto * 2) {
		// 		this.current = 3
		// 	} else if (e.scrollTop > 0 && e.scrollTop < this.onlyPhotoHalf + this.onlyPhoto * 3) {
		// 		this.current = 4
		// 	} else if (e.scrollTop > 0 && e.scrollTop < this.onlyPhotoHalf + this.onlyPhoto * 4) {
		// 		this.current = 5
		// 	}
		// },
		methods: {
			clickPhoto() {
				let arr = []
				this.contractPhoto.forEach(item => {
					arr.push(item.img)
				})
				// 预览图片
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			}
		}
	}
</script>

css部分：

<style scoped lang="scss">
	.container {
		padding: 20rpx 20rpx 180rpx 20rpx;

		.current {
			position: fixed;
			right: 0;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			padding: 5rpx 20rpx;
			border-radius: 10rpx;
		}

		.img_model {
			width: 100%;
			height: 1000rpx;
			margin: 10rpx 0;
			border: 1rpx solid black;
			border-radius: 10rpx;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);

		.btn_txt {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fa6e08;
			width: 90%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: white;
			font-size: 30rpx;
			border-radius: 10rpx;
		}
	}
</style>