经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
来源:cnblogs  作者:xiaoyan2017  时间:2018/11/30 9:18:24  对本文有异议

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

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

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

 

智能小程序弹窗demo展示:

 

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

  1. /**
  2. * @title 百度小程序自定义弹窗demo
  3. * @Create andy
  4. * @Timer 2018/11/29 23:50:45 GMT+0800 (中国标准时间)
  5. * @bolg https://www.cnblogs.com/xiaoyan2017 Q:282310962 wx:xy190310
  6. */
  7.  
  8. // 引入插件js
  9. import {wcPop} from '../../utils/component/wcPop/tpl.js';
  10. Page({
  11. data: {},
  12. onLoad: function () {
  13. // 页面加载
  14. },
  15. /**
  16. * --------- 百度小程序弹窗演示函数.Start ---------
  17. */
  18. //msg提示
  19. btnTap01: function(e) {
  20. wcPop({
  21. anim: 'fadeIn',
  22. content: 'msg提示框测试(5s后窗口关闭)',
  23. shade: true,
  24. shadeClose: false,
  25. time: 5
  26. });
  27. },
  28. //msg提示(黑色背景)
  29. btnTap02: function(e) {
  30. wcPop({
  31. content: 'msg提示框测试(2s后窗口关闭)',
  32. shade: false,
  33. style: 'background: rgba(17,17,17,.7); color: #fff;',
  34. time: 2
  35. });
  36. },
  37. //信息框
  38. btnTap03: function(e) {
  39. var index = wcPop({
  40. content: '信息框 (这里演示信息框功能效果,这里演示信息框功能效果,这里演示信息框功能效果)',
  41. shadeClose: true,
  42. anim: 'rollIn',
  43. xclose: true,
  44. btns: [
  45. {
  46. text: '知道了',
  47. style: 'color: #999',
  48. onTap() {
  49. wcPop.close(index);
  50. console.log("知道了");
  51. }
  52. }
  53. ]
  54. });
  55. },
  56. //询问框
  57. btnTap04: function(e) {
  58. wcPop({
  59. title: '温馨提示~~~',
  60. content: '警告,非法操作非法操作非法操作非法操作非法操作非法操作非法操作!!!',
  61. shadeClose: false,
  62. anim: 'shake',
  63. btns: [
  64. {
  65. text: '取消',
  66. onTap() {
  67. console.log('您点击了取消!');
  68. wcPop.close();
  69. }
  70. },
  71. {
  72. text: '确定',
  73. style: 'color:#3388ff;',
  74. onTap() {
  75. console.log('您点击了确定!');
  76. }
  77. }
  78. ]
  79. });
  80. },
  81. //自定义多按钮
  82. btnTap05: function(e) {
  83. wcPop({
  84. title: '^-^悠然的时光',
  85. content: '漫长时光里流露出无限温柔で,要努力做好这一切,时刻准备向前,多年后必会感谢曾经努力的自己',
  86. style: 'border-top:5px solid #3388ff;max-width:90%', //自定义弹窗样式
  87. anim: 'fadeInUp',
  88. opacity: .85,
  89. btns: [
  90. {
  91. text: '发消息',
  92. style: 'color:#179b16;',
  93. onTap() {
  94. console.log('您点击了发消息!');
  95. }
  96. },
  97. {
  98. text: '评论他',
  99. style: 'color:#3388ff;',
  100. onTap() {
  101. console.log('您点击了发送该名片!');
  102. }
  103. },
  104. {
  105. text: '赞一下',
  106. onTap() {
  107. console.log('您点击了赞一下!');
  108. wcPop.close();
  109. }
  110. }
  111. ]
  112. });
  113. },
  114. //底部对话框
  115. btnTap06: function(e) {
  116. wcPop({
  117. skin: 'footer',
  118. content: '确定删除该条数据吗?删除后可在7天之内恢复数据,超过7天后数据就无法恢复啦!',
  119. anim: 'footer',
  120. shadeClose: false,
  121. btns: [
  122. {
  123. text: '恢复',
  124. style: 'color:#3388ff;',
  125. onTap() {
  126. console.log('您点击了恢复!');
  127. }
  128. },
  129. {
  130. text: '删除',
  131. style: 'color:#e63d23;',
  132. onTap() {
  133. console.log('您点击了删除!');
  134. //删除回调提示
  135. wcPop({
  136. anim: 'fadeIn',
  137. content: '您点击了删除功能',
  138. shade: true,
  139. time: 3
  140. });
  141. }
  142. },
  143. {
  144. text: '取消',
  145. onTap() {
  146. console.log('您点击了取消!');
  147. wcPop.close();
  148. }
  149. }
  150. ]
  151. });
  152. },
  153. });

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号