微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...

WXML

将整个底层页面使用 scroll-view 包裹起来，设置 scroll-y 当显示弹出层的时候为 true，闭关弹出层的时候为 false

WXSS

Page 设置为绝对定位，宽高各百分之百， scroll-view 高度百分之百

Page{

position: absolute;

width: 100%;

height: 100%;

display: block;

background: #FAFAFA;

overflow-y: hidden;

}

scroll-view{

height:100%;

}

JS 控制 showModalStatus 的开关。

不过这引入了新的问题，无法触发 onReachBottom 页面上拉触底事件的处理函数

不介意的话可以使用 scroll-view 的 bindscrolltolower 进行解决 bindscrolltolower 方法触发 onReachBottom()

WXML

bindscrolltolower:function(){

console.log('bindscrolltolower')

var page = getCurrentPages().pop()

console.log(page)

page.onReachBottom()

}

所以另一种方法

WXML

把底层页面使用 view 包裹起来，动态设置样式

WXSS

动态样式开启模态层时，绝对定位

.page-fix{

position: fixed;

}

微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...相关推荐

微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）
项目实现效果如图项目效果实现思路: wxml页面设计好底部栏<加入购物车,立即购买> 绑定点击触发弹出层函数写好弹出窗效果写好原始页面暗化效果项目实现代码 1.wxml代码 (其中 ...
qt自定义按钮类，每个按钮自带一个右键弹出框，如何使同一时刻只显示一个弹出框
提要继承于QPushButton的自定义按钮类,其右键弹出一个弹框,创建多个这样的自定义按钮在窗口中,每一时刻只显示一个右键弹出框,避免同一时刻,多个按钮右键弹出弹出框后,未及时关闭弹出框导致的同一 ...
vue弹层时禁止页面滚动
创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...
android 弹出框带标题栏,Android微信右上角弹出的对话选择框实现
Android微信右上角弹出的对话选择框实现我在之前的文章中曾给出了一个开源的微信UI大体实现方案具体代码实现,参见附录文章1.本文单单挑出一个微信的UI实现点:微信右上角弹出的选择对话框.如 ...
js实现弹出框时禁止页面滚动，关闭弹出框时恢复页面滚动
$(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...
微信小程序腾讯云 mysql 初始_微信小程序初始化怎么处理？小程序服务器域名配置...
小程序初始化配置指引假如您已成功创建了小程序资源,需要对现有的资源进行一些简单配置后,才能让小程序跑起来未创建过资源的用户可以先在小程序控制台进行创建 1.配置微信小程序通信域名首先我们在小程序 ...
私人定制(附源码)：弹出框统一样式一个JS文件就可以解决！
前言毋庸置疑,现在的CP经理对于浏览器自带的弹出框已经产生审美疲劳. 在这里为什么我会强调CP经理呢?因为下面的陈述句可能就是你我都日常: -我认为这个需求可以实现 -哦?这个效果实现不了吗? -那 ...
微信小程序可以用python开发吗_微信小程序可以用python开发吗
现有业务主要包括小程序开发及运营推广,APP开发,公众号开发以及H5开发,提供微信小程序开发.朋友圈广告.微信支付等服务,协助企业数字化转型,打造智能化.智慧化的商业体系尤其是一些品牌的云服务器的价 ...
小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...

微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...

微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...相关推荐

最新文章

热门文章

微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...

微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...相关推荐

最新文章

热门文章

微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...

微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...相关推荐