效果图

.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) {

},
```

微信小程序自定义弹窗(可通用)的更多相关文章

  1. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  2. 微信小程序 - 自定义弹窗组件

    2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...

  3. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  4. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  5. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  6. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  8. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  9. 微信小程序自定义组件,提示组件

    微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...

随机推荐

  1. [Advanced Python] 10 - Transfer parameters

    动态库调用 一.Python调用 .so From: Python调用Linux下的动态库(.so) (1) 生成.so:.c to .so lolo@-id:workme$ gcc -Wall -g ...

  2. C++基础之关联容器

    关联容器 关联容器和顺序容器的本质区别:关联容器是通过键存取和读取元素.顺序容器通过元素在容器中的位置顺序存储和访问元素.因此,关联容器不提供front.push_front.pop_front.ba ...

  3. 【linux】【ELK】搭建Elasticsearch+Logstash+Kibana+Filebeat日志收集系统

    前言 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是 ...

  4. ##发送post时,设置了utf-8,中文还是乱码?

    发送post时,设置了utf-8,中文还是乱码? 我们用HttpUrlConnection或HttpClient发送了post请求,其中有中文,虽然我们两边都设置了utf-8,但还是乱码? 我们在re ...

  5. StackOverflow 第四周周报及19年就业情况分析

    这是 Stack Overflow 第四周周报,两篇 Java.两篇 Python.公众号「渡码」为日更,欢迎关注.另外,我搜集了今年的就业数据,对招聘情况和岗位情况做了简单总结,想了解的朋友点这里. ...

  6. Servlet防止盗链

    在开发过程中有时存在用户直接复制链接,而绕过首页的情况.如果需要用户访问首页,而不是直接访问我们的网页,我们就称为盗链. 在Servlet中通过Request的getHeader()方法获取链接来源, ...

  7. Excel自定义格式参数

    一.自定义格式 方式一:代码结构组成代码分为四个部分,中间用“:”号分隔,具体如下:正数格式:负数格式:零格式:文本格式 两个代码部分,则第一部分用于正数和零和文本,第二部分用于负数 一个代码部分,则 ...

  8. CentOS 7上编写自定义系统审计规则

    1)简介 Linux审计系统创建审计跟踪,这是一种跟踪系统上各种信息的方法.它可以记录大量数据,如事件类型,日期和时间,用户ID,系统调用,进程,使用的文件,SELinux上下文和敏感度级别.它可以跟 ...

  9. Python 爬虫监控女神的QQ空间新的说说,实现邮箱发送

    主要实现的功能就是:监控女神的 QQ空间,一旦女神发布新的说说,你的邮箱马上就会收到说说内容,是不是想了解一下 先看看代码运行效果图: PS:只有你有一台云服务器你就可以把程序24h运行起来 直接上代 ...

  10. layer.open打开一个新的jsp页面,如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...