成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ranwu / 3116人閱讀

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

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
    })
  },

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

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

})

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98168.html

相關(guān)文章

  • 小程序練習(xí)，仿bilibili小程序

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

    2shou 評(píng)論0 收藏0

  • 小程序練習(xí)，仿bilibili小程序

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

    longshengwang 評(píng)論0 收藏0

  • 小程序練習(xí)，仿bilibili小程序

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

    yedf 評(píng)論0 收藏0

  • 記錄微信小程序的坑

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

    EastWoodYang 評(píng)論0 收藏0

  • 潛在的惡意：前端彈窗類組件的鍵盤操作

    摘要：而當(dāng)用戶使用鍵盤操作，焦點(diǎn)發(fā)生變化后，當(dāng)前焦點(diǎn)在哪一項(xiàng)上，必須給出明確的視覺提示，否則極容易帶來困難，甚至誤操作?；剀囨I按下時(shí)，則會(huì)到相應(yīng)賬號(hào)，或者取消操作關(guān)閉彈出層。再來看看組件庫的組件中的確認(rèn)消息。 本文作者:文藺原文地址:http://www.wemlion.com/2016/a...本文由 @文藺 創(chuàng)作，轉(zhuǎn)載請(qǐng)保留此聲明。所有權(quán)利保留，請(qǐng)勿用于商業(yè)目的。 問題提出 需要說明的是...

    tinylcy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<