微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼)
更新時(shí)間：2019年12月05日 14:23:22 作者：故事外的人呀
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
小程序官網(wǎng)里彈出框一般都是類似下面形式：
而有時(shí)候我們需要更豐富的彈窗時(shí)，就可用自定義彈窗的樣式：
舉個(gè)例子，像下面圖的樣式，點(diǎn)擊后會(huì)彈出不一樣的窗口：
代碼如下：
index.wxml 文件
<!--index.wxml-->
<view class="click" bindtap="click">
<text>點(diǎn)擊出現(xiàn)彈窗</text>
</view>
<!-- 彈窗 -->
<view class="window" wx:if="{{tab==1}}">
自定義內(nèi)容。。。
</view>
index.wxss 文件
/**index.wxss**/
.click{
width: 500rpx;
height: 70rpx;
font-size: 20px;
}
.window{
position: fixed;
height: 400rpx;
width: 400rpx;
transform: translate( 50%, 50%);/*距x,y軸*/
background: salmon;
}
index.js 文件
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()
Page({
data: {
tab: 0
},
//點(diǎn)擊出現(xiàn)彈窗
click: function() {
let that = this;
that.setData({
tab: 1
});
}
})
完整代碼已放在github上，鏈接如下：
https://github.com/bbSpider/miniprogram
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS集合set類的實(shí)現(xiàn)與使用方法,結(jié)合具體實(shí)例形式分析了javascript集合的創(chuàng)建、元素添加、刪除以及并集、交集、補(bǔ)集等運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
javascript 裝載iframe子頁面，自適應(yīng)高度
2009-03-03
fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐
本文主要介紹了fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在實(shí)際開發(fā)中我們會(huì)遇到不確定高度的情況,那么在uniapp中我們?nèi)绾潍@取區(qū)域的高度吶?這篇文章主要給大家介紹了關(guān)于uniapp獲取頁面高度與元素高度的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了stackoverflow常用工具庫總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
javascript parseInt與Number函數(shù)的區(qū)別
在js中，如果你使用parseInt("08"),一般都會(huì)認(rèn)為會(huì)返回8，然而實(shí)際上返回了0.但是用Number("08")返回的才是8.2010-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多列選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
FreeMarker是一個(gè)用Java語言編寫的模板引擎，它基于模板來生成文本輸出，用FreeMarker判斷對(duì)象是否為空的方法大家知道嗎，這篇文章就針對(duì)這個(gè)知道點(diǎn)做介紹，需要的朋友可以參考下2015-08-08
使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法
這篇文章主要介紹了使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
BOM系列第一篇之定時(shí)器setTimeout和setInterval
這篇文章主要介紹了BOM系列第一篇之定時(shí)器setTimeout和setInterval 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08