小程序禁止滚动穿透,page-meta

使用场景:页面中有弹窗,并且弹窗里数据超过弹窗的高,要在弹窗做滑动操作,当弹窗滑动到底部的时候,继续划动会导致底层页面的滚动,这就是滚动穿透。这种情况对于体验感很不友好。
解决办法:使用page-meta。截下官方的图
小程序禁止滚动穿透,page-meta_第1张图片

<template>
	<page-meta :page-style="'overflow:'+(maskShows?'hidden':'visible')">page-meta>
	<view>
		。。。
	view>
template>

如果把page-meta放在view里的话,会提示一个错误
在这里插入图片描述
必须放在整个页面的template下面才行。maskShows是弹窗是否显示的字段,这样的话弹窗的滑动就不会影响到主页面了。

你可能感兴趣的:(uniapp,微信小程序,小程序,uni-app)