解决微信小程序自定义弹窗,滑动自定义弹窗底部的页面也一起跟着滑动的问题

阅读: 评论:0

解决微信小程序自定义弹窗,滑动自定义弹窗底部的页面也一起跟着滑动的问题

解决微信小程序自定义弹窗,滑动自定义弹窗底部的页面也一起跟着滑动的问题

解决方案,我总结了以下几种

1、控制底部根目录scroll-view 的scroll-y属性的true/false,控制底部滚动以及不滚动

2、在自定义弹框最外层元素加上catchtouchmove=’true’ ;或者catchtouchmove="preventTouchMove"

Pages({

  preventTouchMove() {}

})

注意!!!,使用场景!!!

适用于自定义内弹框不包含scroll-view 情况下;
此时底部根目录可以不为scroll-view 也可以生效
而且必须真机测试,电脑客户端不行


3、底部最外层scroll-view 的scroll-y属性恒为true

css height 100vh

自定义弹框只需要position:fixed。底层就不会滚动了,这个应该是最近几个版本微信更新了,自定义弹窗的滚动事件不会冒泡到底部scroll-view了

原文:=copy 
 

我是借鉴第三种:因为我的自定义弹窗中有scroll-view的存在前两种不好使,

//下面是最外层的view,当显示弹窗的时候用了另外一个样式,不显示弹窗的时候用原始的样式

<scroll-view class='{{showBuyCon ? "page-con-showbuy" : "page-con"}}'>

css 最外层view样式:

.page-con{

/* overflow-y: hidden; */

/* background-color: #000; */

/* z-index: -1; */

overflow: hidden;

}

.page-con-showbuy{

height: 100vh;

}

成功解决问题

本文发布于:2024-01-31 23:04:40,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170671348432031.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:自定义   页面   程序   微信小
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23