微信小程序自定义弹窗(可通用)
效果图
.wxml
.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) {
},
```
微信小程序自定义弹窗(可通用)的更多相关文章
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序 - 自定义弹窗组件
2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
随机推荐
- tomcat启动出现乱码
打开tomcat目录下apache-tomcat-9.0.26\conf\logging.properties 替换全文 encoding = UTF-8 为 encoding = GBK: rest ...
- 记一次 JavaScript 浮点型数字误差引发的问题
需求 车间的工人在生产出来产品后,需要完成初步的自检,并通过手机上报.在实际生产中,用户(工人)不方便进行数值的输入,因而表单中的一些项设计成 picker 模式以供选取数值.数值的取值范围,根据允许 ...
- LeetCode 430. Faltten a Multilevel Doubly Linked List
题目链接:LeetCode 430. Faltten a Multilevel Doubly Linked List class Node { public: int val = NULL; Node ...
- 关于IDEA的maven没有artifacts的解决方法
做如下配置即可 settings-->bulid...-->Bulid Tools --> Maven-->Improting-->选中Impor Maven proje ...
- 编程范式 --- 面向协议编程(Protocol Oriented Programming,简称POP)
面向协议编程(Protocol Oriented Programming,简称POP) 是Swift的一种编程范式,Apple于2015年WWDC踢出 在Swift的标准库中,能见到大量POP的影子 ...
- Maven 梳理 -多模块 vs 继承
Maven提高篇系列之(一)——多模块 vs 继承 这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plu ...
- plsql导入导出表结构和数据对象
一.Tools的导出表结构:export User objects 二.Tools的Export Tables选项 导出表数据:export tables (选择:exp.exe) 三. 导入表结构: ...
- CentOS系统查看软件安装路径
Linux系统一般都是命令行界面,对于安装的软件也是通过命令安装的.对于软件包更新和卸载等有时候需要查看检查是否有改软件,软件安装存储的路径对于修改配置文件等是必要的.那么怎么查看软件安装路径呢?小编 ...
- TP5安装workerman版本的坑
今天想在TP5上安装workerman,用于个人学习,然后悲剧的是,第一步就卡住了,根据手册里说的首先通过composer安装 composer require topthink/think-work ...
- Python集训营45天—Day08 (文件操作)
目录 1. 文件操作介绍 2. 文件的读写 2.1 文本文件 2.2 二进制文件 2.3 JSON文件 3. 文件的定位,重命名和删除 4. 文件夹的相关操作 1. 文件操作介绍 大家应该听说过一句话 ...