百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板

最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整。而且官方提供的弹窗组件也不能满足一些复杂展示场景,所以就自己动手封装了个智能小程序弹窗wcPop自定义模板插件。

百度智能小程序wcPop支持多种动画展示形式,超精简调用api,可自定义多按钮事件,随意自定义弹窗模板内容。

智能小程序弹窗demo展示:

插件调用api超简洁,易于上手,只需在需要调用的页面引入tpl.js即可:

/**
* @title 百度小程序自定义弹窗demo
* @Create andy
* @Timer 2018/11/29 23:50:45 GMT+0800 (中国标准时间)
* @bolg https://www.cnblogs.com/xiaoyan2017 Q:282310962 wx:xy190310
*/ // 引入插件js
import {wcPop} from '../../utils/component/wcPop/tpl.js'; Page({
data: {},
onLoad: function () {
// 页面加载
}, /**
* --------- 百度小程序弹窗演示函数.Start ---------
*/
//msg提示
btnTap01: function(e) {
wcPop({
anim: 'fadeIn',
content: 'msg提示框测试(5s后窗口关闭)',
shade: true,
shadeClose: false,
time: 5
});
}, //msg提示(黑色背景)
btnTap02: function(e) {
wcPop({
content: 'msg提示框测试(2s后窗口关闭)',
shade: false,
style: 'background: rgba(17,17,17,.7); color: #fff;',
time: 2
});
}, //信息框
btnTap03: function(e) {
var index = wcPop({
content: '信息框 (这里演示信息框功能效果,这里演示信息框功能效果,这里演示信息框功能效果)', shadeClose: true,
anim: 'rollIn',
xclose: true, btns: [
{
text: '知道了',
style: 'color: #999',
onTap() {
wcPop.close(index);
console.log("知道了");
}
}
]
});
}, //询问框
btnTap04: function(e) {
wcPop({
title: '温馨提示~~~',
content: '警告,非法操作非法操作非法操作非法操作非法操作非法操作非法操作!!!',
shadeClose: false,
anim: 'shake', btns: [
{
text: '取消',
onTap() {
console.log('您点击了取消!');
wcPop.close();
}
},
{
text: '确定',
style: 'color:#3388ff;',
onTap() {
console.log('您点击了确定!');
}
}
]
});
}, //自定义多按钮
btnTap05: function(e) {
wcPop({
title: '^-^悠然的时光',
content: '漫长时光里流露出无限温柔で,要努力做好这一切,时刻准备向前,多年后必会感谢曾经努力的自己',
style: 'border-top:5px solid #3388ff;max-width:90%', //自定义弹窗样式
anim: 'fadeInUp',
opacity: .85, btns: [
{
text: '发消息',
style: 'color:#179b16;',
onTap() {
console.log('您点击了发消息!');
}
},
{
text: '评论他',
style: 'color:#3388ff;',
onTap() {
console.log('您点击了发送该名片!');
}
},
{
text: '赞一下',
onTap() {
console.log('您点击了赞一下!');
wcPop.close();
}
}
]
});
}, //底部对话框
btnTap06: function(e) {
wcPop({
skin: 'footer',
content: '确定删除该条数据吗?删除后可在7天之内恢复数据,超过7天后数据就无法恢复啦!',
anim: 'footer',
shadeClose: false, btns: [
{
text: '恢复',
style: 'color:#3388ff;',
onTap() {
console.log('您点击了恢复!'); }
},
{
text: '删除',
style: 'color:#e63d23;',
onTap() {
console.log('您点击了删除!'); //删除回调提示
wcPop({
anim: 'fadeIn',
content: '您点击了删除功能',
shade: true,
time: 3
});
}
},
{
text: '取消',
onTap() {
console.log('您点击了取消!');
wcPop.close();
}
}
]
});
}, });

百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板的更多相关文章

  1. 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序

    微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 ...

  2. 封装Vue Element的dialog弹窗组件

    我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...

  3. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  4. 封装React AntD的dialog弹窗组件

    前一段时间分享了基于vue和element所封装的弹窗组件(封装Vue Element的dialog弹窗组件),今天就来分享一个基于react和antD所封装的弹窗组件,反正所使用的技术还是那个技术, ...

  5. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  6. 小程序自定义modal弹窗封装实现

    前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示, ...

  7. Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库

    Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...

  8. 微信小程序UI组件库 iView Weapp快速上手

    概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...

  9. Wuss Weapp 微信小程序 UI 组件库

    微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...

随机推荐

  1. 读取型CSRF-需要交互的内容劫持

    本文作者:i春秋作家——jing0102 前言 最近在挖洞,"实践出真知"这句话说的很对,在实际挖掘过程中我会思考很多东西,跟朋友一起准备做一份手册,忽然的想到了一些漏洞的定义和规 ...

  2. GoLang学习之数据类型

    数据类型 Go语言按类别有以下几种数据类型: bool,一个字节,值是true或者false,不可以用0或者1表示 int/uint(带符号为与不带符号位的int类型):根据平台不同是32位或者64位 ...

  3. Git - 回滚与撤销

    必要的概念 当前编辑界面:工作区(workspace) "git add"命令:将改动加入到缓存区(Index) "git commit"命令:提交代码到本地库 ...

  4. 反向读取Mysql数据库表结构到PowerDesigner中

    使用PowerDesigner挺长时间了,只是一些简单的表结构设计,因需要对当前数据库进行再设计,需要看一下数据库中所有的表,及表之间的关系,并重新修改表结构,因此需求就是怎么把数据库中的表结构反向生 ...

  5. git常用命令(todo...)

    git init在目录中执行 git init,就可以创建一个 Git 仓库 git add test.javagit add 命令可将该文件添加到缓存(暂存区) git commit test.ja ...

  6. 关于Python2和Python3之间的文本模型改变

    原文地址:http://python-notes.curiousefficiency.org/en/latest/python3/questions_and_answers.html#what-act ...

  7. css - bootstrap3下拉菜单点击之后怎么改变背景颜色?

    css添加 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .n ...

  8. 面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)

    python python _.__.__xx__之间的差别 python中range.xrange和randrange的区别 python中 =.copy.deepcopy的差别 python 继承 ...

  9. 【转】Windows 8 desktop app中dll搜索路径设置的诡异现象,Bug?

    原文地址:http://blog.csdn.net/my_business/article/details/8850151 某个桌面程序在win 8上运行异常的问题困扰了我有近一周,今天终于找到了根本 ...

  10. discuz 文件模板edit

    1.修改title Power by discuz! 位置:template/default/common   --->header_common.htm 2.discuz.htm 文件路径(修 ...