java非模态弹窗,仿IOS模态弹窗组件【恋人小清单开发总结】

因为默认的弹窗很丑。所以决定自己写一个仿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

{{title}}

{{content}}

{{cancelText}}

{{confirmText}}

open-type="getUserInfo"

bindgetuserinfo="_confirmHandler">{{confirmText}}

{{confirmText}}

open-type="getUserInfo"

bindgetuserinfo="_confirmHandler">{{confirmText}}

{{cancelText}}

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.jsconst 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);

}

}

});