微信小程序自定義模態(tài)彈窗組件詳解

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

小程序自帶一個showModal彈窗，調(diào)用很簡單，但是限制很多，title有字?jǐn)?shù)限制，中間的content也只能放文字不能放組件，所以作為一個前端碰到那種連續(xù)好幾個跟微信自帶的模態(tài)彈窗風(fēng)格一模一樣，但是功能又花里胡哨的UI稿，就不能忍受頻繁的復(fù)制粘貼了。自己寫了一個組件，雖然調(diào)用起來比微信自帶的麻煩一點(diǎn)，但是還蠻實(shí)用的。

效果大概長這樣。

上代碼：

wxml：

<!-- 自定義模態(tài)彈窗 -->
<view class="modalDIY" wx:if="{{showModal}}">
 <view class="bg">
 <view class="modalTitle">{{title}}</view>
 <view class="modalContent">
  <view>{{content}}</view>
  <slot></slot>
 </view>
 <view class="modalOperate">
  <view bindtap="_cancel" hidden="{{!showCancel}}" style="color:{{cancelColor}}" class="cancelBtn">{{cancelText}}</view>
  <view bindtap="_comfirm" class="comfirmBtn" style="color:{{confirmColor}}">{{confirmText}}</view>
 </view>
 </view>
</view>

js：

const regeneratorRuntime = require('../../dependence/generator-runtime.js'); //這是一個es6轉(zhuǎn)es5的js
Component({
 properties: {
 // 這里定義了innerText屬性，屬性值可以在組件使用時指定
 },
 data: {
 showModal: false,
 title: '溫馨提示',
 content: '',
 showCancel: true,
 cancelColor: '#3a3a3a',
 cancelText: '取消',
 confirmColor: '#00800',
 confirmText: '確認(rèn)',
 comfirm() { },
 cancel() { }
 },
 methods: {
 // 外部方法調(diào)用
 showModal(params) {
  this.setData({
  showModal: true,
  title: params.title || '溫馨提示', //title
  content: params.content || '',//中間內(nèi)容
  showCancel: params.showCancel == undefined ? true : params.showCancel,//是否顯示左側(cè)
  cancelColor: params.cancelColor || '#3a3a3a',//取消按鈕文字顏色
  cancelText: params.cancelText || '取消',//左側(cè)按鈕文字
  confirmColor: params.confirmColor || '#09BA07',//右側(cè)按鈕文字顏色
  confirmText: params.confirmText || '確認(rèn)',//右側(cè)按鈕文字
  /* 回調(diào)函數(shù) */
  comfirm: params.comfirm || function(){},//點(diǎn)擊確認(rèn)（右側(cè)按鈕）
  cancel: params.cancel || function(){}//點(diǎn)擊取消（左側(cè)按鈕）
  })
 },
 // 點(diǎn)擊確定
 _comfirm() {
  this.setData({
  showModal: false
  },()=>{
  this.data.comfirm();
  })
 },
 // 點(diǎn)擊取消
 _cancel() {
  this.setData({
  showModal: false
  },()=>{
  this.data.cancel();
  })
 }
 }
})
 
// 調(diào)用示例
// 引入組件后通過js selectComponent('#id')方法獲得組件對象 再調(diào)用組件對象下的showModal方法 傳入配置參數(shù)即可 可以在組件中自定義內(nèi)容節(jié)點(diǎn)

wxss：

.modalDIY{
 position: fixed;
 z-index: 99999999;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: rgba(0,0,0,0.6);
 display: flex;
 align-items: center;
 align-content: center;
 justify-content: center;
}
.bg{
 background: #fff;
 text-align: center;
 border-radius: 10rpx;
 width: 90%;
}
.modalTitle{
 padding: 30rpx 40rpx 0 40rpx;
 font-size: 36rpx;
 line-height: 55rpx;
 color: #000;
}
.modalContent{
 padding: 20rpx 40rpx;
 font-size: 30rpx;
 color: #7a7a7a;
}
.modalOperate{
 height: 100rpx;
 line-height: 100rpx;
 border-top: 2rpx solid #eee;
 display: flex;
}
.cancelBtn{
 border-right: 2rpx solid #eee;
 flex: 1;
}
.comfirmBtn{
 flex: 1;
}

json：（記住要把component設(shè)置成true）

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

調(diào)用的時候需要貼別說明一下，拿我上面示例圖的第二個彈窗的調(diào)用為例

首先引入組件

在wxml中引用組件

在js中可以配置一些顏色之類的樣式

首先通過selectComponent這個方法獲得組件對象，可以存成全局的常量。

我們要調(diào)用這個對象下自己封裝的showModal方法

完畢。

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：通過微信公眾平臺獲取公眾號文章的方法示例

欄目：JavaScript

下一篇：如何基于JS截獲動態(tài)代碼

本文標(biāo)題：微信小程序自定義模態(tài)彈窗組件詳解

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9397.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

微信小程序自定義模態(tài)彈窗組件詳解

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀