微信小程序开发uni-popup弹出层触摸穿透问题解决

这篇具有很好参考价值的文章主要介绍了微信小程序开发uni-popup弹出层触摸穿透问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题现象:
       目前小程序弹出层穿透有两种问题: 第一种:小程序弹出层不滚动的时候,往上下拉时会连页面一起拉动,这个用户体验性很差的。
解决办法一:
在uni-popup标签中,增加catchtouchmoves属性 ,就ok了~
Tip:在微信开发者工具上无效,只对真机有效的,所以要在真机上测试
解决办法二:
小程序弹出层滚动的时候,加catchtouchmove没效果 解决方案:利用scroll-view和page的overflow:hidden组合使用 弹出层的时候,isShowPicker为false,就是禁止scroll-view滚动。关闭弹出层,isShowPicker为true,就能正常滚动。
Tip:scroll-view里如果要做圆角的图片,采用这个方法,在ios上会失去圆角的
解决办法三:
​
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>

​
<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
		<!-- ... -->
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false
			}
		},
		methods: {
			change(e) {
				this.show = e.show
			}
		}
	}
</script>


文章来源地址https://www.toymoban.com/news/detail-852447.html

到了这里,关于微信小程序开发uni-popup弹出层触摸穿透问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 浅谈WPF之Popup弹出层

    在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何 在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口 ,仅供学习分享使

    2024年02月03日
    浏览(44)
  • uniapp组件库Popup 弹出层 的使用方法

    目录 #平台差异说明 #基本使用 #设置弹出层的方向 #设置弹出层的圆角 #控制弹窗的宽度 | 高度 #内容局部滚动 #API #Props #Event 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义 #平台差异说明 App H5 微信小

    2024年01月21日
    浏览(48)
  • uniapp中uni-popup的用法——实例讲解

    uni-pop弹出层组件,在应用中弹出一个消息提示窗口、提示框等,可以设置弹出层的位置,是中间、底部、还是顶部。 如下图效果所示:白色区域则为弹出的pop层。 一、 创建一个自定义组件 : 1.项目中安装下载uni-pop插件。 2.把pop内容单独写个组件。 这里放到 components下。 t

    2024年02月12日
    浏览(33)
  • uni-popup(实现自定义弹窗提示、交互)

            一般提示框的样式,一般由设计稿而定,如果用uniapp的showmodel,那个并不能满足我们需要的自定义样式,所以最好的方式是我们自己封装一个!(想什么样就什么样)! 一、页面效果 二、使用uni-popup 直接看代码吧! 我这里是把他封装成组件,一般这种交互性的

    2024年03月18日
    浏览(80)
  • 【uniapp 中使用uni-popup阻止左滑退出程序】

    在uniapp中,可以使用uni-app插件uni-popup提供的阻止左滑退出程序的功能。具体步骤如下: 安装uni-popup插件:在HBuilderX编辑器中,打开manifest.json文件,找到“dependencies”字段,在其后添加: “uni-popup”: “^1.4.3” 保存并关闭文件后,HBuilderX会自动安装插件。 在APP.vue中引入uni

    2024年02月13日
    浏览(35)
  • # vue3 vant4 Tabbar 标签栏组件的封装 和Popup弹出层的封装

    需求如上,标签栏里第三个是图片,整个项目有两种场景, 标签栏正常跳转页面, 标签拦渲染别的图片时候,点击就是打开弹出层, 封装了标签栏,弹出层两部分,作为公共组件 标签栏的封装 徽标样式需要调整,list现在是自己暂时再state里写的假数据 下面是再使用标签组

    2024年01月20日
    浏览(43)
  • react-router-domV6.21.1版本结合ant design mobile的TabBar标签栏和Popup弹出层实现移动端路由配置

    react-router-dom在V6版本之后更换了很多的API名称,在ant design mobile的TabBar配置中还是之前的旧版本,比如使用了 switch 组件等。我们在这里使用新版本的react-router-dom进行react移动端的配置 首先使用npm下载最新版的react-router-dom 然后在main.tsx文件中引入,并且使用MemoryRouter作为我们

    2024年01月25日
    浏览(43)
  • uni-app使用uView打开弹出层后输入框聚焦时placeholder错位问题

    这里就不放效果了,大概意思就是在使用uView的popus时,在底部弹出后,如果弹窗中的输入框会造成一瞬间的placeholder文字错位,这个问题的主要是因为uView安全区适配导致 uView相关文档 popus源码 它会自动判断在并且在IPhone X等机型的时候,给元素加上一个适当底部内边距,从

    2024年02月19日
    浏览(40)
  • 微信小程序弹出层弹出后禁止页面滚动

    1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空 2. 在弹出层打开是,改变变量的值 3.给isNoRoll设置样式

    2024年02月08日
    浏览(68)
  • 原生微信小程序实现弹出层效果

    WXML JS WXSS 效果图

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包