uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能實(shí)例

更新時(shí)間：2023年08月25日 11:24:41 作者：金州

這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能的相關(guān)資料,UniApp框架中提供了兩種不同類型的彈出框,以幫助我們滿足不同的需求,需要的朋友可以參考下

用uniapp實(shí)現(xiàn)一個(gè)彈出窗

1.需要引入uni-popup 彈出層插件

網(wǎng)址如下：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;
	}

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)點(diǎn)擊出現(xiàn)彈窗功能的文章就介紹到這了,更多相關(guān)uniapp點(diǎn)擊出現(xiàn)彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Bootstrap插件
這篇文章主要為大家針對Bootstrap插件的相關(guān)資料進(jìn)行了詳細(xì)介紹，Bootstrap 自帶 12 種 jQuery 插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)，感興趣的小伙伴們可以參考一下
2016-04-04
javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 單例模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript單例模式原理、定義、應(yīng)用場景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之廣義表的定義與表示方法,簡單講述了廣義表的原理與相關(guān)概念,并結(jié)合實(shí)例形式分析了javascript定義與使用廣義表的相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
TypeScript前端高頻面試題總結(jié)大全(2026最新版)
TypeScript作為JavaScript的超集,已經(jīng)成為前端開發(fā)中不可或缺的技術(shù),這篇文章主要介紹了TypeScript前端高頻面試題總結(jié)大全的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2026-05-05
給js文件傳參數(shù)(詳解)
這篇文章主要介紹了給js文件傳參數(shù)的方法,需要的朋友可以參考下
2014-07-07
JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實(shí)例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序開發(fā)打開另一個(gè)小程序的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊后變換按鈕顯示文字的方法,可實(shí)現(xiàn)顯示一些按鈕如果點(diǎn)擊了,按鈕文本變?yōu)椤包c(diǎn)了”,其他按鈕文本變?yōu)椤皼]點(diǎn)”的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-05-05
15個(gè)用于開發(fā)的TypeScript高級技巧分享
這篇文章主要來和大家分享一下15個(gè)用于開發(fā)的TypeScript高級技巧，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-07-07
javascript時(shí)間差插件分享
這篇文章主要為大家分享了javascript時(shí)間差插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-07-07