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

最新推荐文章于 2024-08-19 11:47:52 发布

今晚打老虎...

最新推荐文章于 2024-08-19 11:47:52 发布

阅读量2.6k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_39958629/article/details/89451043

版权

本文介绍了如何解决微信小程序中自定义弹窗与页面滚动冲突的问题，提供了四个实现步骤，包括使用scroll-view作为根节点，设置Page的overflow-y属性，设定scroll-view的高度，以及在打开和关闭弹窗时动态调整isScroll属性。

摘要由CSDN通过智能技术生成

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

实现步骤：
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 ==