uniapp - 弹出层的使用

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

目录

前言

报错原因分析

 使用步骤

第一步

---

前言

最近在写 小程序的项目，前面的页面跳转、样式结构，写的都很流畅，奈何后面直接在小程序的popup弹出层卡死，就这一个功能，卡了老半天

​编辑​编辑

报错原因分析

最开始是在 官网里面 查找 找到使用 uniapp里面的方法，就进行操作，进行配置，配置完成后，就把官网的 代码C过去，但不曾想 报open is undefined ，后面就在 博客，掘金上找文章，看为啥报这个错误，找到，很多方法，最终还是报错，实在不行，最后我下载uview这个组件库，奈何还是不行，人都快崩溃了，

<template>
	<view>
		<button @click="open">打开弹窗</button>
		<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
	</view>
</template>
<script>
export default {
   methods:{
      open(){
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      }
   }
}
</script>

最终我重新 建立了一个项目 ，直接把代码C过去就可以直接使用了 

 使用步骤

第一步：

​

第二步

 直接使用

​

修改

最终没想到还会遇到popup 报错

报错的时候，应先打印 

console.log(this.$refs.popup)

看它打印结果

若结果为对象 就直接.open

若为 数组 就是 this.$refs.popup[0].open()