uniapp弹窗

### UniApp 中实现弹窗功能的方法 在 UniApp 开发框架中，可以通过多种方式来实现弹窗功能。以下是基于提供的引用以及常见实践的具体说明。 #### 使用 `ayy-modal` 组件作为全局弹窗 为了使 `ayy-modal` 成为全局可用的弹窗组件，在项目初始化时需配置其路径。如果未正确设置路径，则可能导致 APP 平台无法正常显示弹窗[^1]。 通过如下代码可以导航到该组件： ```javascript uni.navigateTo({ url: '/uni_modules/ayy-modal/components/ayy-modal/ayy-modal' }); ``` 此方法适用于需要动态加载弹窗场景的情况。 --- #### 控制弹窗状态（打开/关闭） 对于控制弹窗的状态切换操作，通常会使用实例中的 `this` 来调用特定函数完成逻辑处理。例如，当需要停止页面滚动或者允许滚动恢复时，可分别执行以下命令[^2]: - 打开弹窗并阻止背景滚动： ```javascript this.stop(); ``` - 关闭弹窗并恢复背景滚动： ```javascript this.move(); ``` 上述方法能够有效管理弹窗的行为及其对父级界面的影响。 --- #### 处理 H5 下的滚动穿透问题 针对 H5 环境下可能出现的滚动穿透现象——即即使有模态框存在，仍能触碰到下方内容触发滚动事件的问题，可通过监听滚动位置变化加以规避[^3]。具体做法是在 Vue 的数据模型里定义变量存储当前滚动高度，并绑定至相应 DOM 节点上： ```javascript export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } }; }, methods: { scroll(e) { this.old.scrollTop = e.detail.scrollTop; } } }; ``` 与此同时，在样式层面也需要配合调整以达到最佳效果，比如锁定 body 元素防止滑动等措施。 --- #### 完整示例代码 下面给出一段综合以上要点的实际应用例子： ```html <template> <view class="container"> <!-- 弹窗 --> <ayy-modal v-if="isModalVisible"></ayy-modal> <!-- 主体内容 --> <scroll-view scroll-y @scroll="scroll" style="height: 100vh;"> <button @click="toggleModal">点击展示弹窗</button> </scroll-view> </view> </template> <script> import ayyModal from '@/components/ayy-modal.vue'; export default { components: { ayyModal }, data() { return { isModalVisible: false, scrollTop: 0, old: { scrollTop: 0 } }; }, methods: { toggleModal() { if (this.isModalVisible) { this.move(); // 如果已经开启则先关闭再重新启动新的流程 } else { this.stop(); // 阻止默认行为 } this.isModalVisible = !this.isModalVisible; // 切换可见性标志位 }, stop() { console.log('Stopping scrolling...'); }, move() { console.log('Allowing movement again...'); }, scroll(e) { this.old.scrollTop = e.detail.scrollTop; } } }; </script> <style scoped> .container { position: relative; } </style> ``` ---