kpsz-answer-h5/components/mypage/page5.vue

<template>
	<view class="page5">
		<image src="@/static/page5-bg.png" class="bkg" alt="" />
		<view class="page5-wrap">
			<scroll-view style="height: 100vh" :scroll-y="true">
				<view class="page5-wrap_content">
					<image src="/static/page5-title.png" class="page5-wrap_title"></image>
					<view class="page5-wrap_text">
						<image src="/static/page5-content.png" class="page5-wrap_text_img"></image>
						<view class="content">
							<view>
								<view class="number">社会信任关爱</view>
								<view>孤独症人士具有刻板的认知和行为特征，需要周围人用更温和的态度对待。</view>
							</view>
							<view>
								<view class="number">努力消除歧视</view>
								<view>孤独症人士应与普通人享有同等权利，应该得到支持和保障。</view>
							</view>
							<view>
								<view class="number">积极尊重鼓励</view>
								<view>要多鼓励孤独症人士，给予他们更多的尊重和关心。</view>
							</view>
							<view>
								<view class="number">支持社会力量</view>
								<view>对于那些帮助孤独症人士的相关专业人员，应给予足够的支持和帮助。</view>
							</view>
							<view>
								<view class="number">关注孤独症患者家长</view>
								<view>也应多给予孤独症患者家长更多关心和鼓励，由于社会不理解、长期的精神和经济压力，孤独症患者家长也是需要关心和尊重的群体。</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startY: 0,
				scrollTop: 0,
				isScrolling: false,
				canSwipe: true
			}
		},
		methods: {
			// 触摸开始
			touchStart(e) {
				this.startY = e.touches[0].pageY
			},

			// 触摸移动
			touchMove(e) {
				const currentY = e.touches[0].pageY
				const moveDistance = currentY - this.startY

				// 获取当前scroll-view的滚动信息
				const query = uni.createSelectorQuery().in(this)
				query.select('.page5-wrap_content').boundingClientRect(data => {
					const scrollViewHeight = data.height
					const windowHeight = uni.getSystemInfoSync().windowHeight

					// 内容高度小于屏幕高度，允许swiper滑动
					if (scrollViewHeight <= windowHeight) {
						this.canSwipe = true
						return
					}

					// 在顶部下拉
					if (this.scrollTop <= 0 && moveDistance > 0) {
						this.canSwipe = true
					}
					// 在底部上拉
					else if (this.scrollTop >= scrollViewHeight - windowHeight && moveDistance < 0) {
						this.canSwipe = true
					}
					// 在中间滚动
					else {
						this.canSwipe = false
						e.stopPropagation()
					}
				}).exec()
			},

			// 触摸结束
			touchEnd() {
				this.canSwipe = true
			},

			// 滚动到顶部
			onScrollToUpper() {
				this.scrollTop = 0
				this.$emit("scrollTop",true)
			},

			// 滚动到底部
			onScrollToLower(e) {
				this.$emit("scrollBottom",true)
				const query = uni.createSelectorQuery().in(this)
				query.select('.page5-wrap_content').boundingClientRect(data => {
					this.scrollTop = data.height
				}).exec()
			},

			// 监听滚动事件
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page5 {
		width: 100vw;
		height: 100vh;
		position: relative;

		.bkg {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}

		&-wrap {
			width: 100vw;
			height: 100vh;
			overflow: scroll;
			position: absolute;
			top: 0;
			left: 0;
			// padding-bottom: 350rpx;

			&_content {
				margin-top: 65rpx;
				padding-bottom: 175px;
			}

			&_title {
				width: 490rpx;
				height: 149rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}

			&_text {
				width: 717rpx;
				height: 1315rpx;
				display: block;
				margin: 0 auto;
				position: relative;

				&_img {
					width: 717rpx;
					height: 1315rpx;
					display: block;
					margin: 0 auto;
				}

				.content {
					width: 570rpx;
					display: block;
					margin: 0 auto;
					position: absolute;
					top: 70rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #6f6f6f;
					font-size: 32rpx;
					line-height: 2;

					.number {
						color: #784009;
						font-size: 36rpx;
					}
				}
			}
		}
	}
	/* 当屏幕宽度小于 320px 时 */
	@media (max-width: 320px) {
	    .content {
	        font-size: 24rpx!important;
	    }
	}
	/* 当屏幕宽度大于 414px 时 */
	// @media (min-width: 414px) {
	//     .content {
	//         font-size: 32rpx;
	//     }
	// }
</style>