微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法，供大家参考，具体内容如下

先看效果是否是自己需要的

实现步骤：

1.整个布局用作为根节点包裹所有查看，并动态绑定滚动视图的滚动y属性2.样式文件中设置页的溢出y属性值为隐藏3。样式文件中设置滚动视图的高度属性值为100%4.打开自定义弹窗的点击事件中，更改isScroll的值为假的，关闭弹窗的点击事件中，更改isScroll的值为真实的

JS:

页面({ /** *页面的初始数据*/data: { arrayData: null，dialogData: null，isDialogShow: false，isScroll: true }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ //构建测试数据让数据=新数组();let dialog=new Array()；用于(设I=0；i 25i ) { data[i]='我是测试-我；对话框[i]={ name: '我是弹窗——我，是选了：假的}；}这个。setdata({ arraydata : data，dialog data : dialog })；}, /** * 显示、关闭弹窗*/showDialog:函数{ var currentStatu=e .当前目标。数据集。状态；console.log('currentStatu: '，currentStatu)；//关闭if(currentStatu==' close '){ this。setdata({ isdialogshow : false，is croll : true })；} //显示if(currentStatu==' open '){ this。setdata({ isdialogshow : true，is croll : false })；} }})wxml:

按钮做点什么/button scroll-view scroll-y=' { { isScroll } } ' view class=' rootView ' view class=' Intable ' view wx : for=' { { Arraydata } } ' wx : key=' ' class=' Unititemleft ' bind tap=' showDialog ' data-status=' open ' input class=' BaseItemwithBorder ' value=' { { item } } ' disabled//view/view/scroll-view！-测试弹窗-view class=' dialogMarsk ' bind tap=' showDialog ' data-status=' close ' wx : if=' { { isDialogShow } } '/view！-dialog-view class=' dialog ' wx : if=' { { isDialogShow } } ' view class=' approval TItle ' text style=' font-size :24 px；'我是弹窗/text/view视图wx :用于=“{ { dialogData } }”类=“apprecialization table”视图类=“UnitiTemlose”文本类=“BaseItemwithBorder”项。name } }/text/view/view/view wxss:

第{位置：页绝对；font-size : 36rpx宽度： 100%;高度： 100%;显示器：块；背景# FAFAFA溢出-y:隐藏；}滚动查看{身高： 100%；} .rootView {/*宽度： 100%；*/padd : 10 rpx；显示： flex flex-方向：柱；}.baseItemwithBorder { flex-grow : 1；高度： 100%;左填充左： 20rpx填充-右侧： 20 rpx边框-底部：实心1rpx gainsboro}.表{宽度： 100%；display : flex box-shadow :5 px 5px 10px灰色；弯曲方向：柱；边距-top : 40 rpx；背景：白色；}.Inde尾部{宽度： 100%；height : 80 rpx display : flex }。unitLeft{狡辩-内容： flex-start；左填充left: 20rpx}。unititem左侧{宽度： 100%；height : 80 rpx display : flex flex-方向：行；}.dialogMarsk { width : 100%；高度： 100%;位置：固定；top : 0；左： 0；z指数： 1000；background: rgba(0，0，0，0.6)；飞越：隐藏；}.对话框{宽度： 80%；高度： 50%;位置：固定；前：名10%；z指数： 1001；背景# FaFaFabOrder-radius : 3px；溢出-y:滚动；}.升值表{宽度： 98%；显示： flex flex-方向：柱；背景：白色；margin: 0 10rpx}。欣赏标题{宽度： 100%；显示： flex flex-方向：柱；align-items:居中；正义-内容：中心；保证金-top : 20 rpx；保证金-底部： 20 rpx}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。