百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
程序员文章站
2022-07-02 13:55:02
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整。而且官方提供的弹窗组件也不能满足一些复杂展示场景,所以就自己动手封装了个智能小程序弹窗wcPop自定义模板插件。 百度智能小 ......
百度智能小程序自定义弹窗组件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(); } } ] }); }, });
上一篇: 前端面试 - 算法篇(约塞夫环)
下一篇: css给html添加效果