微信小程序封裝自定義彈窗的實(shí)現(xiàn)代碼
最近在做小程序的登錄,需要同時(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操作
這篇文章主要給大家介紹了關(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利用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)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02