uniapp实现点击出现弹窗功能实例
更新时间：2023年08月25日 11:24:41 作者：金州
这篇文章主要给大家介绍了关于uniapp实现点击出现弹窗功能的相关资料,UniApp框架中提供了两种不同类型的弹出框,以帮助我们满足不同的需求,需要的朋友可以参考下
用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;
}总结
到此这篇关于uniapp实现点击出现弹窗功能的文章就介绍到这了,更多相关uniapp点击出现弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家针对Bootstrap插件的相关资料进行了详细介绍，Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动，感兴趣的小伙伴们可以参考一下2016-04-04
javascript设计模式 – 单例模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 单例模式原理与应用,结合实例形式分析了javascript单例模式原理、定义、应用场景及相关操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JavaScript数据结构之广义表的定义与表示方法,简单讲述了广义表的原理与相关概念,并结合实例形式分析了javascript定义与使用广义表的相关操作技巧,需要的朋友可以参考下2017-04-04
TypeScript前端高频面试题总结大全(2026最新版)
TypeScript作为JavaScript的超集,已经成为前端开发中不可或缺的技术,这篇文章主要介绍了TypeScript前端高频面试题总结大全的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-05-05
这篇文章主要介绍了给js文件传参数的方法,需要的朋友可以参考下2014-07-07
这篇文章主要介绍了JavaScript实现数组全排列、去重及求最大值算法,结合实例形式分析了JavaScript针对数组的递归、遍历、排序等相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了微信小程序开发打开另一个小程序的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要来和大家分享一下15个用于开发的TypeScript高级技巧，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-07-07
这篇文章主要为大家分享了javascript时间差插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论