小程序弹窗阻止滑动的两种方法

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。

场景1:弹窗内无滚动内容

可以在弹窗最外层元素绑定touchmove事件,触发事件返回false即(在vue类框架中也可以加.stop阻止冒泡)。

简单写法:catchtouchmove=‘true‘

此种方式会阻止弹窗内内容的滚动。

场景二:弹窗内有滚动内容

在弹窗外层根元素动态添加一个no-scroll样式,定义no-scroll为{height: 100%; overflow: hidden;}

当需要阻止滑动的弹窗显示时添加no-scroll,弹窗关闭去掉no-scroll即可。

此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。

原文地址:https://www.cnblogs.com/cangqinglang/p/9769951.html

时间: 2024-08-01 06:10:38

小程序弹窗阻止滑动的两种方法的相关文章

程序打印自身代码的两种方法

程序打印自身代码的两种方法 方法一:利用fopen,打开可执行程序对应的source code file /***************************************** code writer : EOF code file : print_my_self.c code date : 2014.08.01 e-mail: [email protected] code purpose : Aha, print out myself! *********************

分享为小程序添加自动回复消息的5种方法!自动客服功能的微信小程序

如何通过小程序客服消息引导自动关注公众号? 小程序客服自动回复一个图文链接? 小程序客服可以发小程序卡片吗? 小程序客服能像公众号一样设置关键词回复吗? 收到消息时自动回复? 微信小程序新手如何默认自动回复功能 如果你遇到以上问题,请往下看!教大家实现微信小程序客服自动回复消息功能,以帮助我们更好地与客户进行互动. 当我们的小程序接入客服,在小程序前端增加一个客服按钮,用户可以点击按钮主动和我们的客服互动! 但是有个问题,消息那么多,如何才能接待的过来,能否想微信公众号一样自动回复,关键词回复,

微信小程序解析富文本的几种方法

工作中有遇到过在小程序中需要解析后台管理系统设置的富文本内容, 一,可以使用wxParse插件解析html 使用方法 1.在github中下载 下载地址  https://github.com/icindy/wxParse/tree/master/wxParse 但是博住使用后 总是报 VM3004:1 thirdScriptErrorhtml.replace is not a function;at api request success callback function 遍在网上找资料 在

vs2010打包发布安装程序(超全超详细,两种方法)

方法一: 使用安装向导 VS2010打包发布安装卸载教程 VS2010打包发布安装卸载教程 VS2010打包发布安装卸载教程 选择你的开发项目↓ VS2010打包发布安装卸载教程 选择你项目中bin/Debug下的主程序,点击“添加”按钮↓ VS2010打包发布安装卸载教程 VS2010打包发布安装卸载教程 把需要创建程序快捷方式的图标也添加进来:后缀名为:ico(从这里开始向下,方法一和方法二的设置都一样了) VS2010打包发布安装卸载教程 3. 在创建的项目名称(Setup1)上点击右键:

微信小程序传值取值的几种方法

一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 <image src="../../../images/icon_delete.png" /><text>删除</text> //在删除图标与文字添加data-index="{{index}}"自定义属性以及绑定点击事件bindtap=&q

微信小程序弹窗的几种形式

小程序弹窗的几种形式 一.wx.showToast(Object object)微信小程序显示消息提示框 1.不带图标的信息提示 wx.showToast({ title: '服务暂未开通', icon: 'none', duration: 2000 }) 2.带图标得提示:加载中.提示成功 加载中提示: (1)显示 loading 提示框.需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '加载中', }) setTimeout(func

【转】 iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

原文: http://blog.csdn.net/crayondeng/article/details/9057637 --- 关于评论中,很多网友都是需要这部分的相关源码,其实在我上传的新浪微博小程序中,就用到了这个内容,而且是采用自己代码实现的方式,有需要的朋友自己点击这个链接进行下载吧!点击打开链接  现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网 上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方

WPF程序将DLL嵌入到EXE的两种方法

WPF程序将DLL嵌入到EXE的两种方法 这一篇可以看作是<Visual Studio 版本转换工具WPF版开源了>的续,关于<Visual Studio 版本转换工具WPF版开源了>可以参看地下地址(两篇是一样的): 开源中国 http://my.oschina.net/chinesedragon/blog/308336 CNBLOGS http://www.cnblogs.com/luoshupeng/p/3946635.html 引言 前几一写了一个小工具----<Vi

iOS 两种方法实现左右滑动出现侧边菜单栏 slide view

现在很多的APP中都有slide view,左右滑动出现侧边菜单栏的功能,Weico这个应用就有. 网上有很多第三方的类库实现了这种效果,其实自己代码写的话也是很简单的,下面我将介绍两种方法实现slide view.---- 一种是用第三方类库IIViewDeckController这个类库实现的效果比起其他的都好,另一种是自己代码实现这种效果,效果还ok. 实现方法一(使用第三方库IIViewDeckController): https://github.com/Inferis/ViewDec