<abbr id="wsm2q"></abbr>

微信小程序自定義彈窗/彈出層功能，非官方api，自寫

ranwu 發布于2019-08-23 12:14 / 3110人閱讀

摘要：遮罩層彈出層二維碼或其他圖片這里是文本描述，可以查看修改樣式好的彈窗外面的按鈕遮罩層彈出層彈出層里面的圖片彈出層里面的按鈕彈出層里面的文字外面的彈窗禁止屏幕滾動彈出層里面的彈窗

index.wxml







    
    這里是文本描述，可以查看css修改樣式
    好的

彈窗

index.wxss

/**index.wxss**/
/* 外面的按鈕 */
.btn{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px; 
}

/* 遮罩層 */
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.5;
}
 
/* 彈出層 */
.modalDlg{
    width: 70%;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 9999;
    margin: 0 auto;
    background-color: #fff;
    border-radius:5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 彈出層里面的圖片 */
.modalDlg image{
  width: 120px;
  height: 120px;
  margin-top: 30px;
}

/* 彈出層里面的按鈕 */
.ok{
  width: 80px;
  height: 35px;
  background: #44b549;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  margin:20px auto;
  border-radius: 100px;
}

/* 彈出層里面的文字 */
.text{
  text-align: justify;
  font-size: 14px;
  color: #666;
  width: 180px;
  margin-top: 10px;
}

index.js

Page({
  data: {
    showModal: false
  },

  // 外面的彈窗
  btn: function () {
    this.setData({
      showModal: true
    })
  },

  // 禁止屏幕滾動
  preventTouchMove: function () {
  },

  // 彈出層里面的彈窗
  ok: function () {
    this.setData({
      showModal: false
    })
  }

})

TANKING
2018-10-7
HTTP://LIKEYUNBA.COM

GPU云服務器云服務器微信小程序功能微信小程序的功能微信小程序有什么功能微信小程序api接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98168.html

小程序練習，仿bilibili小程序

摘要：微信小程序學習仿嗶哩嗶哩制作的小程序待完善項目預覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發現了它竟然帶來了一場大革命。微信小程序學習 ?仿嗶哩嗶哩制作的小程序（待完善）項目預覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

2shou 2019-08-20 18:24 評論0 收藏0
小程序練習，仿bilibili小程序

摘要：微信小程序學習仿嗶哩嗶哩制作的小程序待完善項目預覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發現了它竟然帶來了一場大革命。微信小程序學習 ?仿嗶哩嗶哩制作的小程序（待完善）項目預覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

longshengwang 2019-08-29 13:02 評論0 收藏0
小程序練習，仿bilibili小程序

摘要：微信小程序學習仿嗶哩嗶哩制作的小程序待完善項目預覽圖小程序大改變之前就被朋友安利使用小程序，最近接近了小程序，發現了它竟然帶來了一場大革命。微信小程序學習 ?仿嗶哩嗶哩制作的小程序（待完善）項目預覽圖 showImg(https://segmentfault.com/img/remote/1460000010418829); 小程序？大改變？之前就被朋友安利使用小程序，最近接近了...

yedf 2019-08-01 17:16 評論0 收藏0
記錄微信小程序的坑

摘要：除官方外的參考文章微信小程序實例創建下發模板消息實例手把手教你開發微信小程序之模版消息開發教你突破小程序模板消息的推送限制獲取用戶信息接口的廢棄問題接口是獲取用戶信息昵稱，頭像等的接口，在官方文檔上寫是即將廢棄。 ----------------更新-------------- 2018年10月10日官網3個接口廢棄的通知： 1、分享監聽接口分享消息給好友時，開發者將無法從callba...

EastWoodYang 2019-08-23 12:02 評論0 收藏0
潛在的惡意：前端彈窗類組件的鍵盤操作

摘要：而當用戶使用鍵盤操作，焦點發生變化后，當前焦點在哪一項上，必須給出明確的視覺提示，否則極容易帶來困難，甚至誤操作。回車鍵按下時，則會到相應賬號，或者取消操作關閉彈出層。再來看看組件庫的組件中的確認消息。本文作者:文藺原文地址:http://www.wemlion.com/2016/a...本文由 @文藺創作，轉載請保留此聲明。所有權利保留，請勿用于商業目的。問題提出需要說明的是...

tinylcy 2019-08-22 10:46 評論0 收藏0