微信小程序自定義Dialog彈框
更新時(shí)間：2022年07月08日 07:30:04 作者：lluohuih
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義Dialog彈框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義Dialog彈框的具體代碼，供大家參考，具體內(nèi)容如下
一、創(chuàng)建組件
1、在根目錄下自定義一個(gè)components文件夾，用來存放自定義的組件。
2、再針對(duì)每一個(gè)組件創(chuàng)建一個(gè)文件夾，用來存放這個(gè)組件相關(guān)的文件。
3、在指定組件的文件夾中右鍵->新建Component創(chuàng)建組件。這樣創(chuàng)建的目的是在json文件中添加"component": true，將其聲明為一個(gè)組件。
下面開始例子：
1、組件頁(yè)面 index.wxml
<!-- 確認(rèn)框 -->
<!-- 遮罩層 -->
<view class="dialog-overlay-view" style="width: {{ windowWidth }}px; height: {{ windowHeight }}px; display: {{ show ? 'block' : 'none' }};"></view>
<view class="col-center" style="width: {{ windowWidth }}px; height: {{ windowHeight }}px; display: {{ show ? 'flex' : 'none' }};">
? ? <view>
? ? ? ? <view class="dialog-content-view">
? ? ? ? ? ? <view>
? ? ? ? ? ? ? ? <text class="dialog-content-text">{{ message }}</text>
? ? ? ? ? ? </view>
? ? ? ? ? ? <view class="operation-view">
? ? ? ? ? ? ? ? <view class="operation-col-view" bindtouchend="onCancel">
? ? ? ? ? ? ? ? ? ? <text class="cancel-text">{{ cancelButtonText }}</text>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <view class="operation-col-view" bindtouchend="onConfirm">
? ? ? ? ? ? ? ? ? ? <text class="confirm-text">{{ confirmButtonText }}</text>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? </view>
? ? ? ? </view>
? ? </view>
</view>2、組件樣式 index.wxss
/* components/dialog/index.wxss */
.dialog-overlay-view {
? ? background-color: #000000;
? ? opacity: 0.5;
? ? position: fixed;
? ? z-index: 10;
}
.col-center {
? ? position: fixed;
? ? z-index: 11;
? ? display: flex;
? ? flex-direction: column;
? ? justify-content: center;
? ? align-items: center;
}
.dialog-content-view {
? ? width: 210px;
? ? background: #FFFFFF;
? ? border-radius: 8px;
? ? display: flex;
? ? flex-direction: column;
? ? justify-content: center;
? ? padding: 40px 40px 20px 40px;
}
.dialog-content-text {
? ? font-size: 14px;
? ? font-family: PingFangSC-Regular, PingFang SC;
? ? font-weight: 400;
? ? color: #454545;
? ? line-height: 20px;
}
.operation-view {
? ? display: flex;
? ? flex-direction: row;
? ? justify-content: space-between;
? ? margin-top: 30px;
}
.operation-col-view {
? ? height: 36px;
? ? width: 75px;
? ? display: flex;
? ? flex-direction: column;
? ? justify-content: center;
? ? align-items: center;
}
.cancel-text {
? ? height: 14px;
? ? font-size: 14px;
? ? font-family: PingFangSC-Regular, PingFang SC;
? ? font-weight: 400;
? ? color: #999999;
? ? line-height: 14px;
}
.confirm-text {
? ? height: 14px;
? ? font-size: 14px;
? ? font-family: PingFangSC-Regular, PingFang SC;
? ? font-weight: 400;
? ? color: #E63719;
? ? line-height: 14px;
}3、組件json配置 index.json
{
? ? "component": true,
? ? "usingComponents": {}
}4、組件頁(yè)面的js index.js
// components/dialog/index.js
Component({
? ? options: {
? ? ? ? /**
? ? ? ? ? ? styleIsolation 選項(xiàng)從基礎(chǔ)庫(kù)版本 2.6.5 開始支持。它支持以下取值：
? ? ? ? ? ? ? ? isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)相互影響（一般情況下的默認(rèn)值）；
? ? ? ? ? ? ? ? apply-shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面；
? ? ? ? ? ? ? ? shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁(yè)面和其他設(shè)置了 apply-shared 或 shared 的自定義組件。（這個(gè)選項(xiàng)在插件中不可用。）
? ? ? ? ?*/
? ? ? ? styleIsolation: 'isolated'
? ? },
? ? /**
? ? ?* 組件的屬性列表
? ? ?*/
? ? properties: {
? ? ? ? cancelButtonText: {
? ? ? ? ? ? type: String,
? ? ? ? ? ? value: '取消'
? ? ? ? },
? ? ? ? confirmButtonText: {
? ? ? ? ? ? type: String,
? ? ? ? ? ? value: '確定'
? ? ? ? },
? ? ? ? message: {
? ? ? ? ? ? type: String,
? ? ? ? ? ? value: ''
? ? ? ? },
? ? ? ? show: {
? ? ? ? ? ? type: Boolean,
? ? ? ? ? ? value: false,
? ? ? ? },
? ? ? ? confirmCallback: null,
? ? ? ? cancelCallback: null,
? ? },
? ? /**
? ? ?* 組件的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? ? windowWidth: 0,
? ? ? ? windowHeight: 0,
? ? },
? ? /**
? ? ?* 生命周期函數(shù)
? ? ?*/
? ? ready: function() {
? ? ? ? var _this = this;
? ? ? ? wx.getSystemInfo({
? ? ? ? ? ? success: function(res) {
? ? ? ? ? ? ? ? _this.setData({
? ? ? ? ? ? ? ? ? ? windowWidth: res.windowWidth,
? ? ? ? ? ? ? ? ? ? windowHeight: res.windowHeight,
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? });
? ? },
? ? /**
? ? ?* 組件的方法列表
? ? ?*/
? ? methods: {
? ? ? ? onConfirm() {
? ? ? ? ? ? if (this.properties.confirmCallback) {
? ? ? ? ? ? ? ? this.properties.confirmCallback();
? ? ? ? ? ? }
? ? ? ? ? ? this.setData({ show: false });
? ? ? ? },
? ? ? ? onCancel() {
? ? ? ? ? ? if (this.properties.cancelCallback) {
? ? ? ? ? ? ? ? this.properties.cancelCallback();
? ? ? ? ? ? }
? ? ? ? ? ? this.setData({ show: false });
? ? ? ? },
? ? }
});5、組件js dialog.js
const defaultOptions = {
? ? show: false,
? ? message: '',
? ? selector: '#cus-dialog',
? ? confirmButtonText: '確認(rèn)',
? ? cancelButtonText: '取消',
? ? confirmCallback: null,
? ? cancelCallback: null,
};
let currentOptions = Object.assign({}, defaultOptions);
function getContext() {
? ? const pages = getCurrentPages();
? ? return pages[pages.length - 1];
}
const Dialog = (options) => {
? ? options = Object.assign(Object.assign({}, currentOptions), options);
? ? const context = options.context || getContext();
? ? const dialog = context.selectComponent(options.selector);
? ? delete options.context;
? ? delete options.selector;
? ? if (dialog) {
? ? ? ? dialog.setData(options);
? ? ? ? wx.nextTick(() => {
? ? ? ? ? ? dialog.setData({ show: true });
? ? ? ? });
? ? }
? ? else {
? ? ? ? console.warn('未找到 cus-dialog 節(jié)點(diǎn)，請(qǐng)確認(rèn) selector 及 context 是否正確');
? ? }
};
Dialog.confirm = (options) => Dialog(Object.assign({ showCancelButton: true }, options));
export default Dialog;6、使用方法
需要用到dialog的頁(yè)面引入dialog組件：
{
? ? "usingComponents": {
? ? ? ? "cus-dialog": "../../components/dialog/index"
? ? }
}頁(yè)面加入dialog節(jié)點(diǎn)：
<cus-dialog id="cus-dialog"/>
在頁(yè)面的js中彈出dialog窗口：
//引入dialog組件
import Dialog from '../../components/dialog/dialog';
//在代碼中調(diào)用
Dialog.confirm({
? ? message: '彈窗內(nèi)容',
? ? selector: '#cus-dialog',
? ? confirmCallback: function() {
? ? ? ? console.log('確認(rèn)啦');
? ? }
});以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript支持區(qū)號(hào)輸入的省市二級(jí)聯(lián)動(dòng)下拉菜單
javascript支持區(qū)號(hào)輸入的省市二級(jí)聯(lián)動(dòng)下拉菜單...2007-05-05
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web開發(fā)更加快捷。本文給大家分享Bootstrap精簡(jiǎn)教程，對(duì)Bootstrap精簡(jiǎn)教程感興趣的朋友一起學(xué)習(xí)2015-11-11
使用clipboard.js庫(kù)實(shí)現(xiàn)復(fù)制剪切功能
這篇文章介紹了clipboard.js實(shí)現(xiàn)復(fù)制功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要是對(duì)JS日期比較大小的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
下面小編就為大家?guī)硪黄猨s 求時(shí)間差的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家。也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
這篇文章主要介紹了JavaScript之ES5的繼承的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
通過JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄ㄟ^JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹）
這篇文章主要介紹了js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
微信小程序通過點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過直接寫 data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12
純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例【支持所有瀏覽器】
這篇文章主要介紹了純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能,結(jié)合實(shí)例形式分析了基于js相關(guān)插件進(jìn)行Excel文件讀取的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06