這篇文章主要介紹了微信小程序 自定義彈窗實(shí)現(xiàn)過程(附代碼),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的山丹網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

小程序官網(wǎng)里彈出框一般都是類似下面形式：

而有時(shí)候我們需要更豐富的彈窗時(shí)，就可用自定義彈窗的樣式：
舉個(gè)例子，像下面圖的樣式，點(diǎn)擊后會(huì)彈出不一樣的窗口：

代碼如下：

index.wxml 文件

 點(diǎn)擊出現(xiàn)彈窗



 自定義內(nèi)容。。。

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。