uniapp 实现点击出现弹窗

原创已于 2023-10-08 10:35:00 修改 · 8.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js

于 2022-11-15 15:46:30 首次发布

本文档介绍了如何在uniapp中实现一个弹出窗口。首先，需要从DCloud插件市场下载uni-popup插件并引入到HBuilder项目中。接着，在HTML部分展示了包含触发弹窗的按钮和弹窗内容的布局。在JavaScript部分定义了toggle方法来打开弹窗。最后，CSS部分定义了弹窗的样式，包括弹窗背景色、内容排列等。

用uniapp实现一个弹出窗

1.需要引入uni-popup 弹出层插件

网址如下：uni-popup 弹出层 - DCloud 插件市场

下载到HBuilder中

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>

js部分：

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

css部分：

	.pop {
		width: 100%;
		background-color: black;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-use {
		padding: 24px 30px;
		width: 290px;
		display: flex;
		justify-content: center;
		letter-spacing: 2px;
		color: #ffffffdb;
	}