uniapp 弹出层 滑动

在uniapp项目中，当页面有弹窗效果时，视频会遮挡弹窗。为了解决这个问题，可以使用subNVues。在pages.json中配置，将视频组件放在subNVues中，这样视频组件就不会遮挡弹窗了。此外，如果弹窗内还有列表，可以在弹框最外层使用@touchmove.stop.prevent="preventHandler"屏蔽触摸事件，但是需要注意的是，屏蔽后如果弹框内还有列表，则列表此时无法滚动。

相关问题

uniapp 弹出层不覆盖顶部

### 解决 UniApp 弹出层不覆盖顶部元素的方法

为了使 UniApp 的弹出层能够正确覆盖页面顶部元素，通常需要调整 CSS 和组件配置来确保弹出层具有更高的 z-index 值以及合适的定位设置。

#### 方法一：通过自定义样式提升弹出层优先级

可以通过修改 `z-index` 属性来提高弹出层的显示层次。默认情况下，某些原生控件可能会有较高的堆叠顺序，因此需要为 `.uni-popup__wrapper` 或者其他相关类名指定更大的数值[^3]：

/* 提升弹出层的整体层级 */
.uni-popup__wrapper {
    position: fixed !important;
    z-index: 9999 !important; /* 设置足够高的值以超越其它元素 */
}

#### 方法二：处理键盘弹起时布局变化的影响

当软键盘弹出时，如果存在输入框，则可能导致整个视窗向上推移，进而影响到弹出层的位置。对此可以在打开弹出层之前记录当前滚动位置，在关闭之后恢复之[^4]:

// 记录并保存原始 scrollTop 值
let originalScrollTop;

export default {
  methods: {
    openPopup() {
      // 打开前存储当前位置
      originalScrollTop = this.$refs.scrollView.scrollTop;
      
      // 显示弹出层逻辑...
    },
    
    closePopup() {
      setTimeout(() => {
        // 关闭后延迟执行恢复操作防止冲突
        if (this.$refs.scrollView) {
          this.$refs.scrollView.scrollTop = originalScrollTop;
        }
      }, 300);
    }
  }
};

此外还可以考虑禁用背景区域内的滚动行为，从而避免因误触造成的意外滑动[^1]。

#### 方法三：优化页面结构设计

对于一些特殊场景下的应用界面来说，重新规划 HTML 结构也是一种有效的解决方案。比如将可能遮挡重要信息的部分放置于较低级别的容器内；或是利用 Flexbox/Grid 等现代布局技术实现更灵活的内容排列方式[^2]。

封装一个uniapp中在nvue也迷嗯适配安卓和苹果的滑动选择器

在uniapp中，你可以使用uni-popup组件来封装一个在nvue中适配安卓和苹果的滑动选择器。下面是一个简单的示例代码：

<template>
  <view>
    <button @click="showPicker">打开选择器</button>
    <uni-popup ref="popup" :show="isShowPopup" :position="'bottom'">
      <view class="popup-content">
        <picker :value="value" @change="onPickerChange">
          <picker-column :values="options"></picker-column>
        </picker>
        <button @click="confirm">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowPopup: false,
      options: ['选项1', '选项2', '选项3'],
      value: 0,
    };
  },
  methods: {
    showPicker() {
      this.isShowPopup = true;
    },
    onPickerChange(event) {
      this.value = event.detail.value;
    },
    confirm() {
      // 处理选择器确认事件
      console.log('选中的值：', this.options[this.value]);
      this.isShowPopup = false;
    },
  },
};
</script>

<style>
.popup-content {
  padding: 20px;
}
</style>

在上述示例中，我们使用了uni-popup组件来创建一个弹出层，通过控制`isShowPopup`属性的值来显示或隐藏弹出层。在弹出层中，我们使用了picker和picker-column组件来实现滑动选择器的功能。通过监听picker的change事件，可以获取用户选择的值。

这样，无论在安卓还是苹果设备上，都可以正确地显示和使用该滑动选择器。你可以根据自己的需求，修改选项的内容和样式。