uniapp實現(xiàn)點擊出現(xiàn)彈窗功能實例
更新時間：2023年08月25日 11:24:41 作者：金州
這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)點擊出現(xiàn)彈窗功能的相關(guān)資料,UniApp框架中提供了兩種不同類型的彈出框,以幫助我們滿足不同的需求,需要的朋友可以參考下
用uniapp實現(xiàn)一個彈出窗
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實現(xiàn)點擊出現(xiàn)彈窗功能的文章就介紹到這了,更多相關(guān)uniapp點擊出現(xiàn)彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript的流程控制語句，感興趣的小伙伴們可以參考一下2015-11-11
動態(tài)加載腳本可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下2014-02-02
JS實現(xiàn)圖文并茂的tab選項卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)圖文并茂的tab選項卡效果,涉及javascript響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
在JavaScript中實現(xiàn)保留兩位小數(shù)的方法小結(jié)
在JavaScript中,處理數(shù)字并格式化它們以顯示特定的小數(shù)位數(shù)是一個常見的需求,特別是,當(dāng)你需要顯示貨幣、測量值或其他需要精確到兩位小數(shù)的數(shù)據(jù)時,本文將詳細介紹幾種在JavaScript中實現(xiàn)保留兩位小數(shù)的方法,需要的朋友可以參考下2024-11-11
javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細介紹了javascript設(shè)計模式之中介者模式學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
分享Javascript中最常用的55個經(jīng)典小技巧
這篇文章主要介紹了Javascript中最常用的55個經(jīng)典小技巧。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
在現(xiàn)代?Web?應(yīng)用程序中,實現(xiàn)高效的搜索功能是至關(guān)重要的,Fuse.js?是一個強大的?JavaScript?庫,它提供了靈活的模糊搜索和文本匹配功能,使您能夠輕松實現(xiàn)出色的搜索體驗,文中代碼示例講解的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了JavaScript表單即時驗證，驗證不成功不能提交，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
下面小編就為大家?guī)硪黄狵indeditor單獨調(diào)用多圖上傳實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
layui數(shù)據(jù)表格 table.render 報錯的解決方法
今天小編就為大家分享一篇layui數(shù)據(jù)表格 table.render 報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09