百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

番茄西红柿发布于2019-04-23 13:09 / 1331人阅读

摘要：楷体百度智能小程序自定义弹窗组件百度小程序对话框智能小程序弹窗界面模板最近百度也推出了自己的智能小程序，如是就赶紧去试了下，官方提供的还不是狠完整。

百度智能小程序自定义弹窗组件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();
            }
            }
        ]
        });
    },

});

私有云混合云智能小程序公众号自定义菜单跳转小程序人工智能小程序小程序组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1488.html

h5聊天IM实例|仿微信语音|地图定位|摇一摇效果

摘要：尤其里面的摇一摇语音功能更是吸引了大批用户，颠覆式的功能及设计，让微信稳稳坐上了社交宝座。介绍之前由于项目需求有开发过一款简单的聊天项目，不过功能及比较简单，最近又重新在原先的基础上进行了一次大的重构，开发了这款仿微信界面聊天系统趣聊。前言相信大家都有使用过微信，微信这款产品确实设计的不错，简约不简单。尤其里面的摇一摇、语音功能更是吸引了大批用户，颠覆式的功能及设计，让微信稳稳坐上...

Steve_Wang_ 2019-08-05 17:40 评论0 收藏0
一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

摘要：三更新内容在原来项目的基础上，做了如下更新数据库重新设计，改成以用户分组的数据库结构应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格删除原来游客模式，增加登录注册功能，支持弹窗登录。这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是...

wh469012917 2019-08-26 11:46 评论0 收藏0
记录微信小程序的坑

摘要：除官方外的参考文章微信小程序实例创建下发模板消息实例手把手教你开发微信小程序之模版消息开发教你突破小程序模板消息的推送限制获取用户信息接口的废弃问题接口是获取用户信息昵称，头像等的接口，在官方文档上写是即将废弃。 ----------------更新-------------- 2018年10月10日官网3个接口废弃的通知： 1、分享监听接口分享消息给好友时，开发者将无法从callba...

EastWoodYang 2019-08-23 12:02 评论0 收藏0
从入门到上线一个天气小程序

摘要：天气预报小程序说了很多小程序开发的基础准备，下面就结合个人实际练手项目天气预报小程序简单说明。物料准备从需求结果导向，天气程序首先要能获取到当前所在地天气状况，再次可以自由选择某地，知道其天气状况。前言学习了一段时间小程序，大致过了两遍开发文档，抽空做个自己的天气预报小程序，全当是练手，在这记录下。小程序开发的安装、注册和接入等流程就不罗列了，在小程序接入指南已经写得很清楚了，以下...

Anshiii 2019-08-23 14:05 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0