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