欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序封裝自定義彈窗的實(shí)現(xiàn)代碼

 更新時(shí)間:2019年05月08日 09:14:11   作者:Indus_wang  
這篇文章主要介紹了微信小程序封裝自定義彈窗的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

 最近在做小程序的登錄,需要同時(shí)獲取用戶手機(jī)號(hào)和頭像昵稱等信息,但是小程序又不支持單個(gè)接口同時(shí)獲取兩種數(shù)據(jù),因此想到自定義一個(gè)彈窗,通過(guò)彈窗按鈕觸發(fā)獲取手機(jī)號(hào)事件。記錄一下。

具體代碼如下:

業(yè)務(wù)代碼中:

  在業(yè)務(wù)代碼中引入dialog組件即可

<dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="測(cè)試一下">
    <view class='dialog-body' slot="dialog-body">
      <view class='dialog-content'>申請(qǐng)獲取你微信綁定的手機(jī)號(hào)</view>
      <view class='dialog-footer' slot="dialog-footer">
        <button class='cancel-btn' bindtap="close">取消</button>
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='confirm-btn'>授權(quán)</button>
      </view>
    </view>
  </dialog>

dialog組件:

component下面新建dialog。注意是 component 不是 page ,因?yàn)橐鳛榻M件引入到頁(yè)面中

  dialog.wxml:

  需要傳入四個(gè)屬性

    visible:是否顯示彈窗

    title :標(biāo)題

    showClose:是否顯示右上角關(guān)閉按鈕

    showFooter:是否顯示底部按鈕

<!--components/dialog/dialog.wxml-->
<view class='dialog-custom' wx:if="{{visible}}">
  <view class='dialog-mask' bindtap="clickMask"></view>
    <view class="dialog-main">
      <view class="dialog-container">
        <view class='dialog-container__title' wx:if="{{title.length>0}}">
          <view class='title-label'>{{ title }}</view>
          <view class='title-icon'>
            <image wx:if="{{showClose}}" bindtap='close' src='/images/close-btn.png'></image>
          </view>
        </view>
      <view class='dialog-container__body'>
        <slot name="dialog-body"></slot>
      </view>
      <view class='dialog-container__footer' wx:if="{{showFooter}}">
        <view class='dialog-container__footer__cancel' bindtap="close">取消</view>
        <view class='dialog-container__footer__confirm' bindtap='confirm'>確定</view>
      </view>
    </view>
  </view>
</view>

dialog.js

 

Component({
/**
* 組件的屬性列表
*/
properties: {
  visible: {
    type: Boolean,
    value: false
  },
  width: {
    type: Number,
    value: 85
  },
  position: {
    type: String,
    value: 'center'
  },
  title: {
    type: String,
    value: ''
  },
  showClose: {
    type: Boolean,
    value: true
  },
  showFooter: {
    type: Boolean,
    value: false
  },
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
options:{
  multipleSlots: true
},
/**
* 組件的方法列表
*/
methods: {
  clickMask() {
    this.setData({ visible: false });
  },
  close(){
    this.setData({ visible: false });
  },
  cancel() {
    this.setData({ visible: false });
    this.triggerEvent('cancel');
  },
  confirm() {
    this.setData({ visible: false });
    this.triggerEvent('confirm');
  }
}
})

dialog.json:聲明是組件就行 

{
  "component": true,
  "usingComponents": {}
}

dialog.wxss

  css可以根據(jù)自己喜好的樣式調(diào)整,注意mask遮罩層的z-index高一點(diǎn),確保在最上層

/* components/dialog/dialog.wxss */
.dialog-custom {
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
}
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.dialog-main {
  position: fixed;
  z-index: 10001;
  top: 50%;
  left: 0;
  right: 0;
  width: 85vw;
  height: auto;
  margin: auto;
  transform: translateY(-50%);
}
.dialog-container {
  margin: 0 auto;
  background: #fff;
  z-index: 10001;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 40rpx;
}
.dialog-container__title {
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  position: relative;
}
.dialog-container__title .title-label{
  display: inline-block;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 36rpx;
  color: #000;
  text-align: center;
}
.dialog-container__title .title-icon{
  width: 34rpx;
  height: 50rpx;
  position: absolute;
  top: 0;
  right: 0;
}
.dialog-container__title .title-icon image{
  width: 34rpx;
  height: 34rpx;
}

.dialog-container__body {
  padding-top: 10rpx;
  font-size: 32rpx;
  line-height: 50rpx;
}

.dialog-container__footer {
  height: 76rpx;
  line-height: 76rpx;
  font-size: 32rpx;
  text-align: center;
  border-top: 1px solid #f1f1f1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.dialog-container__footer .dialog-container__footer__cancel {
  width: 50%;
  color: #999;
  display: inline-block;
}
.dialog-container__footer .dialog-container__footer__cancel::after{
  position: absolute;
  right: 50%;
  bottom: 0;
  content: '';
  width: 2rpx;
  height: 76rpx;
  background: #f1f1f1;
}
.dialog-container__footer .dialog-container__footer__confirm {
  color: #3B98F7;
  width: 50%;
  display: inline-block;
  text-align: center;
}

 

/* components/dialog/dialog.wxss */
.dialog-custom {
width: 100vw;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
}
.dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
width: 100vw;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.dialog-main {
position: fixed;
z-index: 10001;
top: 50%;
left: 0;
right: 0;
width: 85vw;
height: auto;
margin: auto;
transform: translateY(-50%);
}
.dialog-container {
margin: 0 auto;
background: #fff;
z-index: 10001;
border-radius: 3px;
box-sizing: border-box;
padding: 40rpx;
}
.dialog-container__title {
width: 100%;
height: 50rpx;
line-height: 50rpx;
margin-bottom: 20rpx;
position: relative;
}
.dialog-container__title .title-label{
display: inline-block;
width: 100%;
height: 50rpx;
line-height: 50rpx;
font-size: 36rpx;
color: #000;
text-align: center;
}
.dialog-container__title .title-icon{
width: 34rpx;
height: 50rpx;
position: absolute;
top: 0;
right: 0;
}
.dialog-container__title .title-icon image{
width: 34rpx;
height: 34rpx;
}
.dialog-container__body {
 padding-top: 10rpx;
 font-size: 32rpx;
 line-height: 50rpx;
}
.dialog-container__footer {
 height: 76rpx;
 line-height: 76rpx;
 font-size: 32rpx;
 text-align: center;
 border-top: 1px solid #f1f1f1;
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
}
.dialog-container__footer .dialog-container__footer__cancel {
 width: 50%;
 color: #999;
 display: inline-block;
}
.dialog-container__footer .dialog-container__footer__cancel::after{
 position: absolute;
 right: 50%;
 bottom: 0;
 content: '';
 width: 2rpx;
 height: 76rpx;
 background: #f1f1f1;
}
.dialog-container__footer .dialog-container__footer__confirm {
 color: #3B98F7;
 width: 50%;
 display: inline-block;
 text-align: center;
}

總結(jié)

以上所述是小編給大家介紹的微信小程序封裝自定義彈窗的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • JavaScript面試技巧之?dāng)?shù)組的一些不low操作

    JavaScript面試技巧之?dāng)?shù)組的一些不low操作

    這篇文章主要給大家介紹了關(guān)于JavaScript面試技巧之?dāng)?shù)組的一些不low操作的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • js仿百度切換皮膚功能(html+css)

    js仿百度切換皮膚功能(html+css)

    這篇文章主要為大家詳細(xì)介紹了JavaScript仿百度切換皮膚功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • JS修改iframe頁(yè)面背景顏色的方法

    JS修改iframe頁(yè)面背景顏色的方法

    這篇文章主要介紹了JS修改iframe頁(yè)面背景顏色的方法,涉及javascript操作iframe頁(yè)面樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • 小程序?qū)崿F(xiàn)圖片裁剪上傳

    小程序?qū)崿F(xiàn)圖片裁剪上傳

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片裁剪上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • 利用JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果

    利用JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果

    這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)仿QQ個(gè)人資料卡效果,文中的示例代碼講解詳細(xì),感興趣的可以動(dòng)手嘗試一下
    2022-08-08
  • 簡(jiǎn)單js代碼實(shí)現(xiàn)selece二級(jí)聯(lián)動(dòng)(推薦)

    簡(jiǎn)單js代碼實(shí)現(xiàn)selece二級(jí)聯(lián)動(dòng)(推薦)

    這篇文章主要介紹了簡(jiǎn)單js代碼實(shí)現(xiàn)selece二級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-02-02
  • 驅(qū)動(dòng)事件的addEvent.js代碼

    驅(qū)動(dòng)事件的addEvent.js代碼

    驅(qū)動(dòng)事件的addEvent.js代碼...
    2007-03-03
  • 微信小程序webView嵌入H5的方法實(shí)例

    微信小程序webView嵌入H5的方法實(shí)例

    web-view是小程序提供的一個(gè)可以直連h5頁(yè)面的組件,只要傳遞一個(gè)h5頁(yè)面的地址,就可以在小程序里直接打開預(yù)覽該h5頁(yè)面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 一文讀懂微信小程序頁(yè)面導(dǎo)航

    一文讀懂微信小程序頁(yè)面導(dǎo)航

    微信小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文讀懂微信小程序頁(yè)面導(dǎo)航的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 全面介紹javascript實(shí)用技巧及單豎杠

    全面介紹javascript實(shí)用技巧及單豎杠

    關(guān)于js 和javascript的技巧文章已經(jīng)不少了,但是這篇文章則更加詳細(xì)全面,文章先是介紹了使用技巧,而后詳細(xì)解釋了js運(yùn)算符單豎杠“|”的用法和作用及js數(shù)據(jù)處理。
    2016-07-07

最新評(píng)論