uniapp 弹出层

在Uniapp中，弹出层可以通过以下HTML代码实现：

<view @tap="toggle('top')">
  <image src="../../static/points.png" class="points"></image>
</view>
<!-- 弹窗 -->
<uni-popup ref="popup">
  <view class="pop">
    <view class="popup-use">安装视频</view>
    <view class="popup-use">说明书</view>
    <view class="popup-use">常见问题</view>
  </view>
</uni-popup>

其中，`<uni-popup>`标签用于创建弹出层的容器，在这个例子中，我们给这个容器添加了一个`ref`属性，值为"popup"，这样我们就可以通过`this.$refs['popup']`来获取到这个弹出层的引用。

在JS部分，我们可以通过methods中的toggle方法来控制弹出层的开启和关闭：

methods: {
  // 弹窗开启
  toggle() {
    this.$refs['popup'].open();
  },
}

当我们调用`this.$refs['popup'].open()`时，就会打开这个弹出层，实现弹出层的效果。需要注意的是，为了弹出层正常工作，相关的HTML代码要放在最外层。

这样，通过点击`<view>`标签，就可以触发toggle方法，从而打开弹出层。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uniapp 实现点击出现弹窗](https://blog.csdn.net/RemindingMe/article/details/127867097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [uniapp中使用弹出层](https://blog.csdn.net/qq_45903009/article/details/119028425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]