uniapp 使用uni-popup组件时,禁止蒙层下方滑动,禁止点击弹窗外关闭弹窗如何实现?

今天用了uniapp的uni-popup组件,发现默认情况下,蒙层下方会滑动,点击弹窗外可以关闭弹窗,而我是不需要的,是现代码如下:
<uni-popup ref="popup" @touchmove.stop.prevent="moveHandle" :is-mask-click="false">
  <view class="pop-wrap">
        测试
    </view>
</uni-popup>

// :is-mask-click是设置是否可以点击弹窗外关闭弹窗的
// methods中写入如下 禁止弹窗滚动
moveHandle: function() {
	return false
}
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
你可以使用 `uni-popup` 组件实现弹出层的效果。`uni-popup` 是 uni-app 框架的一个原生弹出层组件,可以在页面中创建一个弹出层,并控制其显示和隐藏。 首先,确保你已经在你的 uni-app 项目中安装了 `uni-popup` 组件。可以通过以下命令安装: ``` npm install @dcloudio/uni-popup ``` 接下来,在需要使用弹出层的页面中,引入 `uni-popup` 组件: ```vue <template> <view> <uni-popup :show="showPopup" @close="closePopup"> <!-- 弹出层的内容 --> </uni-popup> <!-- 其他页面内容 --> </view> </template> <script> import uniPopup from '@dcloudio/uni-popup' export default { components: { uniPopup }, data() { return { showPopup: false } }, methods: { openPopup() { this.showPopup = true }, closePopup() { this.showPopup = false } } } </script> ``` 在上述示例中,我们创建了一个 `showPopup` 的 data 属性来控制弹出层的显示和隐藏。当点击打开弹出层的按钮,调用 `openPopup` 方法将 `showPopup` 设置为 `true`,弹出层将显示出来。当点击弹出层上的关闭按钮,会触发 `closePopup` 方法将 `showPopup` 设置为 `false`,弹出层将隐藏。 你可以根据需要自定义弹出层的内容,例如在 `<uni-popup>` 标签内添加你想要展示的内容。 这样就可以通过 `uni-popup` 组件实现弹出层的效果了。记得根据实际情况调整代码,并在合适的机调用 `openPopup` 方法来显示弹出层。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值