uniapp中弹窗层不随底部滑动如何解决

问题描述

在uniapp中，当底部有滑动组件时，弹窗层会跟随页面滑动，而有时我们希望弹窗层固定在页面上不受底部滑动组件的影响。那么，我们该如何解决这个问题呢？

解决方案

解决这个问题的方法有多种，这里我将介绍两种常用的解决方案：

方案一：使用position属性固定弹窗层位置

在uniapp中，我们可以使用CSS的position属性来固定弹窗层的位置。具体的步骤如下：

// HTML结构

  
  

  
  
  



// CSS样式
.container {
  position: relative;
  height: 100%;
}

.content {
  height: 100%;
  overflow-y: scroll;
}

.popup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

通过设置容器的position属性为relative，并将弹窗层的position属性设置为absolute，再通过bottom和left属性来控制弹窗层的位置，从而实现弹窗层固定在底部。

方案二：监听底部滑动组件的滚动事件

如果弹窗层的内容需要实时改变或与底部滑动组件有交互，并且要保持固定在底部，我们可以通过监听底部滑动组件的滚动事件，然后动态修改弹窗层的位置，具体的步骤如下：

// HTML

  
  

  
  弹窗内容


// JavaScript
export default {
  data() {
    return {
      popupBottom: 0, // 弹窗层的bottom值
    };
  },
  
  onLoad() {
    // 监听底部滑动组件的滚动事件
    uni.createSelectorQuery().select('.content').fields({
      size: true,
    }, (res) => {
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      const contentHeight = res.height;
      
      // 计算弹窗层的bottom值
      this.popupBottom = windowHeight - contentHeight;
    }).exec();
  },
};

通过监听底部滑动组件的滚动事件，并使用uni.createSelectorQuery()获取容器和滑动组件的尺寸信息，然后计算出弹窗层的bottom值，从而实现弹窗层固定在底部。

总结

通过使用CSS的position属性或监听滑动事件，我们可以解决uniapp中弹窗层不随底部滑动的问题。根据具体的需求，可以选择合适的方案来实现固定弹窗层的效果。