uniapp 实现点击出现弹窗

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用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;
	}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值