因为默认的弹窗很丑。所以决定本人写一个仿IOS的模态弹窗组件
先看下效果图：
能够扫码体验
目前只是简略实现了一些性能：能够管制确定和勾销按钮的文字、色彩、显示程序。
应用办法：
1、在页面的json配置文件外面增加组件
{ "usingComponents": { "dialog": "/components/dialog/dialog" }}2、页面的wxml外面引入弹窗组件
3、在页面的js外面初始化组件
/**
- 生命周期函数--监听页面加载
*/
onLoad: function (options) { this.dialog = this.selectComponent('#dialog');}4、接下来就能够应用了。调用示例
this.dialog.showDialog({ title: "确定要删除以后清单吗", content: "删除后，清单就找不回来了哦", cancelText: "我点错了", confirmText: "我要删除", confirmColor: "#f96e49", cancelColor: "#3790EE", showCancel: true, confirmPosition: "left", cancelHandler: function () { console.log("点击了勾销按钮"); }, confirmHandler: function () { console.log("点击了确定按钮OUTER"); }});几年前写的代码，间接拿来用。相对来说比较简单。没有花里胡哨的（有点low我晓得。。）
整个组件的原代码如下：
1、dialog.wxml
<view class="custom_dialog" wx:if="{{show}}"> <view class="cover"></view> <view class="dialog"> <view class="tip flex_center {{noTitle?'no_tip':''}}"> <view class="flex_full">{{title}}</view> </view> <view class="content flex_baseline {{noContent?'no_content':''}}"> <view class="flex_full">{{content}}</view> </view> <view class="op_btn flex_center" wx:if="{{confirmPosition=='right'}}"> <view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view> <view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view> <button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}" open-type="getUserInfo" bindgetuserinfo="_confirmHandler">{{confirmText}}</button> </view> <view class="op_btn flex_center" wx:if="{{confirmPosition=='left'}}"> <view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view> <button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}" open-type="getUserInfo" bindgetuserinfo="_confirmHandler">{{confirmText}}</button> <view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view> </view> </view></view>2、dialog.wxss
.flex_center { display: flex; align-items: center;}.flex_end { display: flex; align-items: flex-end;}.flex_baseline { display: flex; align-items: baseline;}.flex_full { flex: 1;}.reset-btn:after { border: none;}.reset-btn { background-color: #FAFAFA; margin: 0; padding: 0; font-size: 32rpx; border-radius: 24rpx;}.custom_dialog{}.custom_dialog .cover{ background-color: #111; opacity: 0.6; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 5000;}.custom_dialog .dialog{ width: 560rpx; border-radius: 24rpx; background-color: #FAFAFA; position: fixed; top: 50%; left: 50%; z-index: 6000; margin: -140rpx 0 0 -280rpx; padding-top: 10rpx; text-align: center;}.custom_dialog .dialog .tip, .custom_dialog .dialog .single_tip{ font-size: 32rpx; color: #242424;}.custom_dialog .dialog .tip{ padding: 32rpx 32rpx 30rpx; /*height: 100rpx;*/ text-align: center; box-sizing: border-box; font-weight: bold;}.custom_dialog .dialog .single_tip{ height: 160rpx; line-height: 1.6;}.custom_dialog .dialog .content, .custom_dialog .dialog .single_content{ font-size: 29rpx; line-height: 1; color: #161616; padding: 0 20rpx 40rpx;}.custom_dialog .dialog .content{ margin-top: -10rpx; /*height: 70rpx;*/}.custom_dialog .dialog .single_content{ height: 160rpx; line-height: 160rpx;}.custom_dialog .dialog .no_content{ padding-bottom: 20rpx !important;}.custom_dialog .dialog .no_tip{ padding-bottom: 10rpx !important;}.custom_dialog .dialog .op_btn{ border-top: 1rpx solid #ccc; height: 96rpx; line-height: 96rpx; font-size: 32rpx;}.custom_dialog .dialog .op_btn .confirm{ color: #3790EE;}.custom_dialog .dialog .op_btn .cancel{ color: #FF644E;}.custom_dialog .dialog .op_btn view{ border-right: 1rpx solid #ccc;}.custom_dialog .dialog .op_btn view:last-child{ border: none;}3、dialog.js
const tabbar = require('../../utils/tabbar.js');Component({ /** * 组件的属性列表 */ properties: {}, /** * 组件的初始数据 */ data: { show: false, title: "",//题目 content: "",//内容 noTitle: false,//是否显示题目 noContent: false,//是否显示内容 showCancel: true,//是否显示勾销按钮 cancelText: "勾销",//勾销按钮文字 cancelColor: "#FF644E",//勾销按钮色彩 confirmText: "确定",//确定按钮文字 confirmColor: "#3790EE",//确定按钮色彩 confirmPosition: "right",//确定按钮地位：left/right cancelHandler: null,//点击勾销按钮回调事件 confirmHandler: null//点击确定按钮回调事件 }, /** * 组件的办法列表 */ methods: { showDialog: function (content) { var that = this; that.setData({ show: true, title: content.title ? content.title : "", content: content.content ? content.content : "", noTitle: !content.title ? true : false, noContent: !content.content ? true : false, cancelText: content.cancelText ? content.cancelText : that.data.cancelText, cancelColor: content.cancelColor ? content.cancelColor : that.data.cancelColor, confirmText: content.confirmText ? content.confirmText : that.data.confirmText, confirmColor: content.confirmColor ? content.confirmColor : that.data.confirmColor, showCancel: content.showCancel != null ? content.showCancel : that.data.showCancel, confirmPosition: content.confirmPosition ? content.confirmPosition : that.data.confirmPosition, confirmNeedAuth: content.confirmNeedAuth ? content.confirmNeedAuth : that.data.confirmNeedAuth, cancelHandler: content.cancelHandler, confirmHandler: content.confirmHandler }); tabbar.hideTab(this); }, _cancelHandler: function () { console.log("点击了勾销按钮INNER"); this.setData({ show: false }); tabbar.showTab(this); typeof this.data.cancelHandler == 'function' && this.data.cancelHandler(); }, _confirmHandler: function (e) { console.log("点击了确定按钮INNER"); this.setData({ show: false }); tabbar.showTab(this); typeof this.data.confirmHandler == 'function' && this.data.confirmHandler(e); } }});