码迷,mamicode.com
首页 > 微信 > 详细

微信小程序自定义弹窗(可通用)

时间:2019-10-28 12:48:42      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:function   rgb   font   OLE   小程序   ssh   XML   size   event   

效果图

技术图片


.wxml

<cover-view class=‘mask‘ wx:if=‘{{isShow}}‘>
<cover-view class=‘modal‘>
<cover-view class=‘content‘>{{content}}</cover-view>
<cover-view class=‘btns‘>
<button class=‘cancel‘ bindtap=‘Cancel‘ wx:if=‘{{showCancel}}‘>取消</button>
<button class=‘success‘ bindtap=‘Success‘>{{confirmText}}</button>
</cover-view>
</cover-view>
</cover-view>

.wxss
.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}

.modal {
width: 580rpx;
background-color: #fff;
border-radius: 16rpx;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.content {
color: #666666;
font-size: 36rpx;
line-height: 47rpx;
white-space: pre-wrap;
padding: 100rpx 6rpx 100rpx;
text-align: center;
letter-spacing: 1rpx;
}

.btns {
height: 100rpx;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
font-size: 36rpx;
}

.cancel {
line-height: 100rpx;
flex-grow: 1;
color: #666666;
border-radius: 0;
border-top: 1rpx solid #D8D8D8;
background-color: #FFFFFF;
}

.success {
line-height: 100rpx;
flex-grow: 1;
color: #FFFFFF;
background-color: #289CFF;
border-radius: 0;
}

.js

Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示
isShow: {
type: Boolean,
},
// 弹框内容
content: {
type: String,
value: ‘‘
},
// 是否显示取消按钮
showCancel: {
type: Boolean,
value: true
},
// 确认按钮文本
confirmText: {
type: String,
value: ‘确认‘
},
},

/**
* 组件的初始数据
*/
data: {

},
/**
* 组件的方法列表
*/
methods: {
close: function () {
this.setData({
isShow: false
});
},
Success: function (e) {
this.triggerEvent(‘success‘, ‘确认‘)
this.close();
},
Cancel: function (e) {
this.triggerEvent(‘sancel‘, ‘取消‘)
this.close();
},
}
})


如何使用
1,在需要的page的json文件引用
```
{
"usingComponents": {
"bullet-box": "/common/component/bulletBox/bulletBox"
}
}
```
2在wxml中添加
```
<bullet-box isShow="{{isBulletBoxShow}}" content=‘确认撤销送货单?‘ bind:success=‘onSuccess‘></bullet-box>
```
3在js中点击显示和确认函数
```
data{
isBulletBoxShow:false
},
// 点击撤销/弹框
cancelDelivery:function(e){
this.setData({
isBulletBoxShow: true,
})
},
// 弹框确认
onSuccess:function(e) {

},
```

微信小程序自定义弹窗(可通用)

标签:function   rgb   font   OLE   小程序   ssh   XML   size   event   

原文地址:https://www.cnblogs.com/moxiaodegu/p/11751304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!