微信小程式封裝自定義彈窗

来源:https://www.cnblogs.com/Indus/archive/2019/05/07/10826418.html
-Advertisement-
Play Games

最近在做小程式的登錄，需要同時獲取用戶手機號和頭像昵稱等信息，但是小程式又不支持單個介面同時獲取兩種數據，因此想到自定義一個彈窗，通過彈窗按鈕觸發獲取手機號事件。記錄一下。 具體代碼如下： 業務代碼中： 在業務代碼中引入dialog組件即可 <dialog visible="{{dialogVisi ...


最近在做小程式的登錄，需要同時獲取用戶手機號和頭像昵稱等信息，但是小程式又不支持單個介面同時獲取兩種數據，因此想到自定義一個彈窗，通過彈窗按鈕觸發獲取手機號事件。記錄一下。

具體代碼如下：

業務代碼中：

　　在業務代碼中引入dialog組件即可

　　<dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="測試一下"> 　　　　<view class='dialog-body' slot="dialog-body"> 　　　　　　<view class='dialog-content'>申請獲取你微信綁定的手機號</view> 　　　　　　<view class='dialog-footer' slot="dialog-footer"> 　　　　　　　　<button class='cancel-btn' bindtap="close">取消</button> 　　　　　　　　<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='confirm-btn'>授權</button> 　　　　　　</view> 　　　　</view> 　　</dialog>

dialog組件：

component下麵新建dialog。註意是 component 不是 page ，因為要作為組件引入到頁面中

　　dialog.wxml:

　　需要傳入四個屬性

　　　　visible：是否顯示彈窗

　　　　title ：標題

　　　　showClose：是否顯示右上角關閉按鈕

　　　　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 　　}, },
/** * 組件的初始數據 */ 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可以根據自己喜好的樣式調整，註意mask遮罩層的z-index高一點，確保在最上層 /* 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; }
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • D3.js比例尺 序數比例尺(v3版本)
    上一章介紹了閾值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html。到目前所有的定量比例尺已經介紹完了。 現在給大家介紹一下序數比例尺。 定量比例尺的定義域都是連續的，值域有連續的也有離散的。序數比例尺(Ordinal Scale)的定義域 ...
  • Jquery學習筆記，全面實用,需要的可以留下郵箱，給大家發原稿文檔
    JQuery 第一章：Jquery概念介紹 1.1 Jquery介紹 （1）並不是一門新語言。將常用的、複雜的操作進行函數化封裝，直接調用，大大降低了使用JavaScript的難度，改變了使用JavaScript的習慣。 （2）常用插件網站：www.jq22.com （3）導入jquery插件兩種方 ...
  • https載入http資源，導致ios手機上的瀏覽器圖片載入問題
    今天解決一個線上bug的時候發現的問題，如下圖： 從表象來看，同樣的圖片，安卓手機上可以正常展示，但是到ios手機上首次進入頁面就不能正常顯示圖片，必須手動刷新一次頁面才能正常載入。 這時候，我們首先會考慮是不是ios設備的相容問題？ 於是乎，第一想到的就是問度娘，ios手機瀏覽器不能正常展示圖片是 ...
  • 淺析libuv源碼-node事件輪詢解析(2)
    上一篇講了輪詢的邊角料，這篇進入正題。 Poll for I/O The loop blocks for I/O. At this point the loop will block for I/O for the duration calculated in the previous step. ...
  • HTTP協議_servlet基礎
    一、定義 http(Hyper Text Transfer Protocol)：超文本傳輸協議 二、作用 數據傳輸 三、概念 HTTP消息： 1.客戶端發向伺服器的請求消息 2.伺服器回給客戶端的響應消息 客戶端和伺服器之間的信息交換過程 1.客戶端和服務建立連接 2.客戶端向伺服器發送請求 3.服 ...
  • 遍歷js中的數組
    可以使用js中的for迴圈，或者forEach方法；也可以使用Ext中的方法遍歷js中的數組 代碼如下： ...
  • 瀏覽器下載img標簽Base64圖片
    https://blog.csdn.net/qq_42076140/article/details/82113622 原文地址 ...
  • 遍歷js對象中的屬性
    可以使用js自帶的for in、也可以使用Ext JS中的方法來遍歷js對象中的屬性 代碼如下： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類