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

微信(小程序)  /  管理员 发布于 3年前   357

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

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

实现步骤：

1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true

JS:

Page({ /**  * 页面的初始数据  */ data: {  arrayData: null,  dialogData: null,  isDialogShow: false,  isScroll: true }, /**  * 生命周期函数--监听页面加载  */ onLoad: function (options) {  //构建测试数据  let data = new Array();  let dialog = new Array();  for (let i = 0; i < 25; i++) {   data[i] = '我是测试-----------' + i;   dialog[i] = {    name: '我是弹窗-' + i,    isSelected: false   };  }  this.setData({   arrayData: data,   dialogData: dialog  }); }, /**  * 显示、关闭弹窗  */ showDialog: function (e) {  var currentStatu = e.currentTarget.dataset.statu;  console.log('currentStatu:', currentStatu);  //关闭   if (currentStatu == "close") {   this.setData({    isDialogShow: false,    isScroll: true   });  }  // 显示   if (currentStatu == "open") {   this.setData({    isDialogShow: true,    isScroll: false   });  } }})

wxml：

做点什么                       我是弹窗       {{item.name}}    

wxss：

Page { position: absolute; font-size: 36rpx; width: 100%; height: 100%; display: block; background: #FAFAFA; overflow-y: hidden;} scroll-view { height: 100%;} .rootView{ /* width: 100%; */ padding: 10rpx; display: flex; flex-direction: column;}.baseItemWithBorder{ flex-grow: 1; height: 100%; padding-left: 20rpx; padding-right: 20rpx; border-bottom: solid 1rpx gainsboro;}.inTable{ width: 100%; display: flex; box-shadow:5px 5px 10px gray; flex-direction: column; margin-top: 40rpx; background: white;}.inDetail{ width: 100%; height: 80rpx; display: flex;}.unitLeft{ justify-content: flex-start; padding-left: 20rpx;}.unitItemLeft{ width: 100%; height: 80rpx; display: flex; flex-direction: row;}.dialogMarsk {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: rgba(0, 0, 0, 0.6); overflow: hidden; }.dialog { width: 80%; height: 50%;  position: fixed;  top: 10%; z-index: 1001;  background: #FAFAFA; border-radius: 3px; overflow-y: scroll;}.appreciationTable{ width: 98%; display: flex; flex-direction: column; background: white; margin: 0 10rpx;}.appreciationTitle{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20rpx; margin-bottom: 20rpx;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序自定义弹窗实现详解(可通用）
• 微信小程序封装自定义弹窗的实现代码
• 微信小程序使用component自定义toast弹窗效果
• 微信小程序自定义弹窗wcPop插件
• 微信小程序自定义toast弹窗效果的实现代码
• 微信小程序实现自定义picker选择器弹窗内容
• 微信小程序实现自定义modal弹窗封装的方法
• 微信小程序实战之自定义模态弹窗（8）
• 微信小程序 自定义弹窗实现过程(附代码)