100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序弹出框竖向滚动_微信小程序 解决自定义弹出层滑动时下层页面滚动问题...

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

时间:2019-06-23 09:49:48

相关推荐

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

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

JS 控制showModalStatus 的开关。

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

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

WXML

JS

bindscrolltolower:function(){

console.log('bindscrolltolower')

var page = getCurrentPages().pop()

console.log(page)

page.onReachBottom()

}

所以另一种方法

WXML

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

WXSS

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

.page-fix{

position: fixed;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。