百度小程序弹窗插件开发 | 智能小程序自定义 model 弹窗 / toast 提示框
百度智能小程序推出来也有一段时间, 看官方提供的弹窗组件形式基本和微信小程序, 支付宝小程序差不多.
如是自己就动手开发了个智能小程序自定义弹窗模板, 自定义弹窗 wcPop 插件
- /**
- * @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 提示 (黑色背景)
- 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("知道了");
- }
- }
- ]
- });
- },
- // 自定义多按钮
- 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();
- }
- }
- ]
- });
- },
- });
来源: http://www.jianshu.com/p/09871edff8d0