微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

这篇具有很好参考价值的文章主要介绍了微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

自定义弹窗

如图所示:

自定义弹窗内部有带滚动条的盒子区域

微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动,微信小程序,小程序

问题:

  • 在盒子上滑动,页面如果超出一屏的话,也会跟着一起上下滚动
    解决方案:给自定义弹窗 添加 catchtouchmove 事件,阻止冒泡即可
    微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动,微信小程序,小程序
    微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动,微信小程序,小程序
    网上不少人说什么 catchtouchmove="true" 这样,可以没问题,其实 catchtouchmove="任何内容" 都行,只要知道 catch***是阻止冒泡的即可,最好还是跟我一样使用一个空函数,不然你就乖乖的看调试工具的警告吧,反正不影响程序运行,随便

新问题:

  • 弹窗内部的滚动区域也无法滚动???
    原因:弹窗内部滚动区域使用的 view 添加的 overflow: auto;
    解决方案1:将弹窗内部的滚动区域换成 scroll-view 组件并添加 scroll-y 属性
    其他解决方案:模仿 scroll-view 组件改 view ,没空,还是方案1简单,暂时先不研究,待补充
    微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动,微信小程序,小程序

    微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-740877.html

到了这里,关于微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序阻止用户返回上一页,并弹窗给用户确定是否要返回上一页

    在onload中调用微信的enableAlertBeforeUnload方法,在首次进入会自动监听当前的页面,在返回的时候会自动弹出弹窗阻止用户返回上一页,点击确定则返回上一页,取消则停留在当前页

    2024年02月07日
    浏览(29)
  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    1、使用page-container前先在pages.json配置(重点!) 2、在页面中配置 @touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件 关于page-container 的一些属性 详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

    2024年02月11日
    浏览(35)
  • 微信小程序|自定义弹窗组件

    2024年02月12日
    浏览(29)
  • uniapp开发微信小程序阻止事件冒泡

        最近在使用uniapp去开发微信小程序     其中不乏遇到一些问题,我都会发出来。     万一自己别的时候忘记,但是需要用了。   uniapp中开发微信小程序,当使用  @click.stop     去阻止事件冒泡的时候 会发现, @click.stop  并没有生效,就很神奇 问题如图: 解决问题方案

    2024年02月12日
    浏览(30)
  • uniapp微信小程序自定义弹窗组件

    写一个能够复用的弹窗组件,内容包括: \\\"标题\\\",\\\"图片\\\",\\\"描述内容\\\",\\\"按钮\\\". 且按钮可能会有多中功能(比如: 点击按钮可能只是关闭弹窗,或者关闭弹窗并跳转) 1.创建弹窗组件 popup-view 1.小编这里考虑组件全局都有可能会用到,就在主包的 components 文件夹下创建popup-view组件 2.组件内

    2024年02月04日
    浏览(30)
  • uniapp&&微信小程序底部弹窗自定义组件

    个人项目地址: SubTopH前端开发个人站   (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home  基础弹窗效果组件 在页面使用 父组件

    2024年02月14日
    浏览(39)
  • 微信小程序之自定义模态弹窗(带动画)实例 —— 微信小程序实战系列(8)(2)

    api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息。 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: button 弹窗标题 标题 标题 标题 标题 备注 确定 wxss: / button / .btn { width: 80%; padding: 20rpx

    2024年04月11日
    浏览(25)
  • 微信小程序隐私协议自定义页面(弹窗)开发流程以及低版本兼容

    这里我选择的是全局监听,进入小程序就会监控用户有没有同意,没有则进行弹窗,不同意则关闭,这个逻辑可以根据自己需要随便修改。 发现有很多人根据自己调试基础库来排查自己涉不涉及,你的小程序是否涉及隐私协议整改,还是看有没有调用涉及隐私接口,如果有,

    2024年01月16日
    浏览(43)
  • 微信小程序自定义顶部状态栏滑动显示标题居中

    开启了自定义顶部的配置,轮播图覆盖了顶部,所以需要做一个上滑到胶囊后重新把标题重新展示出来的操作,自定义标题出现不居中情况,以下为解决后的方案,复制粘贴即可: . wxml: . . wxss: . . 滑动事件:滑动到胶囊后把标题展示出来 . . 计算胶囊按钮高度、状态栏高

    2024年02月17日
    浏览(39)
  • uniapp 微信小程序 自定义弹框+picker下拉选择列表+输入表单:拒绝-选择理由弹窗

    效果: 1、template 2、data: 3、methods: 4、style

    2024年01月20日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包