uniapp 穿透滚动问题

最新推荐文章于 2024-08-13 15:04:37 发布

是谁？

最新推荐文章于 2024-08-13 15:04:37 发布

阅读量559

点赞数

文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/qq_37918196/article/details/130594488

版权

在使用uni-ui和vantweapp的小程序开发中遇到popup的穿透滚动问题，可以通过page-meta标签配合overflow:hidden属性解决。当popup显示时，设置page-meta的overflow为hidden，隐藏页面滚动，关闭时恢复。此方法适用于vue2和vue3的项目。

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

本人开发小程序用的内置的uni-ui，同时也用过vant为小程序提供的vant weapp的UI库，但是他们两个在用popup会出现同样的问题，就是穿透滚动问题，

在这里插入图片描述

这个时候就需要官方提供的page-meta标签，

上代码：

<template>
  <page-meta :page-style="popupShow ? 'overflow: hidden;' : ''"></page-meta>
  <view @click="handlecount"></view>
      <van-popup
      :show="popupShow"
      @close="onClosepopup">
				//这里是内容
    </van-popup>
</template>
<script setup lang="ts">
  const popupShow = ref(false)
  const onClosepopup = () => {
    popupShow.value = false
  }
  const handlecount = () => {
    popupShow.value = true
  }
</script>