在微信小程序中创建属于自己的个性弹框

liangliangshuo

2019-06-30

关注关注

微信小程序提供的弹框模版就3种：
1、消息提示框
在微信小程序中创建属于自己的个性弹框
对应的效果是这样的

在微信小程序中创建属于自己的个性弹框
这一种ui我们可以改变的额只有icon、image、title
2、模拟对话框

在微信小程序中创建属于自己的个性弹框
对应的效果是这样的：

这一种做一些危险操作的提示之类等
3、显示操作菜单

在微信小程序中创建属于自己的个性弹框
对应效果如下：

在微信小程序中创建属于自己的个性弹框

这种可以用来填写某些选择行的信息

看了以上3种弹框，发现和我们Ui差距较大，都用不上。于是我自己写一个我的页面专用的弹框，具体效果如下图：

在微信小程序中创建属于自己的个性弹框

以下是代码贴图

在微信小程序中创建属于自己的个性弹框
最外层的phoneWin样式主要是写后面的遮罩层，content就是具体的弹框区域

在微信小程序中创建属于自己的个性弹框
弹框的显示隐藏用wx:if控制
然后就可以在弹框中写自己想要展示的效果啦！

忽略部分未调整样式

微信小程序 segmentfault 科技新闻

liangliangshuo

0 关注 0 粉丝 0 动态

关注关注

微信小程序订阅消息-写于2020.7.26

亦或是开发环境不受这个限制？前提1：首先要用小程序管理员用户在微信公众平台中开通订阅消息权限。// 用户同意授权的回调函数，此时已经可以给用户发起模板消息了。miniprogram_state 跳转小程序类型。content: ‘是否推送给他/她‘,

sucheng 2020-07-26

.NET CORE3.1实现微信小程序发送订阅消息

　　　　　　　　"Title": "thing6",　　　　　　　　"Content": "thing19",　　　　public static IConfiguration

kgshuo 2020-09-25

腾讯全球数字生态大会微信专场：微信搜一搜通过三大能力打造流量增长新引擎

在9月9日腾讯全球数字生态大会微信专场上，微信搜一搜产品运营总监梁泽锋以“微信搜一搜，流量增长的新引擎”为主题展开了分享。从今年年初微信公开课PRO上首次亮相至今，微信搜一搜已完成多次迭代升级，帮助用户快捷触达各类信息和服务的同时，也帮助品牌在微信生态内精

Tomato 2020-09-10

支付即服务、门店小程序、微信先享卡分别亮相，微信支付持续助力行业数字化升级

9月10日，在2020腾讯全球数字生态大会微信专场上，微信支付零售行业运营总监白振杰分享“微信支付行业深耕,助力商业经济复苏增长”,介绍微信支付及生态内在产品能力和营销工具上的运营思路、实操案例，微信支付将与行业共同探索数字化经营的新可能。疫情期间，各行各

taiyangyu 2020-09-10

日活4亿，覆盖超200个细分行业，活跃服务商超4万家，“小程序经济圈”初具规模

9月9日，“微信·发现新增长”微信专场拉开了腾讯全球数字生态大会的序幕，小程序、微信支付、企业微信、搜一搜、微信AI共同亮相，带来小程序的数字化工具升级及生态开放、“支付即服务”的多场景应用、“企业微信中小企业智慧增长解决方案”，搜一搜“服务搜索”等新信息

CodeAndroid 2020-09-10

微信小程序入口有哪些

微信小程序发展至今，已经逐渐开放了很多流量入口，如果让大家全部去深度发掘不现实，那我们就来看看哪些入口我们一定要好好利用起来呢?点击搜一搜按钮，输入小程序名称，进入小程序即可。使用过的小程序可以设置为成手机桌面图标，即可一键打开小程序。

small 2020-07-29

微信小程序--路由变化对页面生命周期的影响

调用 APIwx.navigateTo使用组件<navigator open-type="navigateTo"/>

且听真言 2020-07-27

微信小程序生命周期

* Lifecycle function--Called when page is initially rendered. * Page event handler function--Called when user drop down. * Calle

zuoliangzhu 2020-07-20

微信小程序如何修改小程序名称

如何修改微信小程序的名称。xiug修改后保存，你就可以看到小程序的名称已经改变了。小程序的配置都在 app.json 中配置。

CodeAndroid 2020-07-14

CocosCreator上的游戏（调试）发布到微信小程序【转】

和普通的软件安装一样，这里博主就不多说了。你可以打开一个项目，或者新建一个项目。将下面选中的修改为微信开发工具的安装路径，比如博主的是：F:\个人\WeiGame\install\微信web开发者工具。其中3步如果你有appid就填自己的，没有就填图中的，

xiaoxubbs 2020-07-04

小程序01-目录结构

小程序的基本项目目录:. 　　　　--- index.wxml 首页的配置文件。　　-- logs 日志页面。- utils 第三方的工具js. - app.js 项目的全局入口文件。- sitemap.json 微信索引配置文件,用来配置小程序及其页面是

sucheng 2020-06-25

Python Flask微信小程序登录流程及登录api实现代码

wx.setStorageSync //设置本地缓存。微信小程序登录后获得session_key后，返回了encryptedData，iv的数据，其中encryptedData解密后包含了用户的信息，解密后的json格式如下：。如果还是提示没有该模块，那就

kgshuo 2020-06-14

微信小程序学习总结（五）常见问题实例小结

本文实例总结了微信小程序常见问题。分享给大家供大家参考，具体如下：。这个是我的报错信息。如果在onLoad方法中，如果是异步执行一个数据绑定，则需要使用this.setData方法。需要说明的这个是数据的本地缓存，可以对本地缓存进行设置、获取和清理。同一个

意外金喜 2020-06-14

微信小程序学习总结（四）事件与冒泡实例分析

本文实例讲述了微信小程序学习总结（四）事件与冒泡。分享给大家供大家参考，具体如下：。先来熟悉一个swiper组件，可以实现我们常见的轮播图效果。wx.navigateTo和wx.redirectTo这两个都可以进行页面跳转，他们的区别在于，wx.navig

zuoliangzhu 2020-06-14

微信小程序学习总结（三）条件、模板、文件引用实例分析

本文实例讲述了微信小程序条件、模板、文件引用。分享给大家供大家参考，具体如下：。Now you can provide attr "wx:key" for a "wx:for" to improve performa

tianping 2020-06-14

微信小程序学习总结（二）样式、属性、模板操作分析

本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考，具体如下：。rpx是小程序常见的尺寸单位，那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx

hgzhang 2020-06-14

如何在微信小程序中使用骨架屏的步骤

骨架屏主要起到占位作用，向用户说明该区域有内容，有一定的心理准备。使用哪一种方案，就要根据自己的项目情况来进行选择了。我采用的是第一种，因为这个页面加载的DOM节点太多了。

killgod 2020-06-14

微信小程序中的列表切换功能实例代码详解

感觉这列表切换有点类似于轮播图，而且感觉这代码直接可以拿来用，稍微改一改样式什么的就OK了，列表切换也是用到的地方也很多。-- 标签页面标题 -->. 'active':''}}" bindtap="changeItem"

戴翔的技术 2020-06-14

微信小程序web-view嵌入H5页面， H5页面向小程序页面传值

在写微信小程序web-view嵌入H5页面， H5页面向小程序页面传值的时候，多次尝试传值和页面返回都不成功，然后仔细看官方文档，发现有这句话：。网页向小程序postMessage时，会在特定时机触发并收到消息。

郴州小程序 2020-06-13

微信小程序-请求、接口拦截

* @param {String} type 接口类型默认request, downloadFile=下载文件预览，uploadFile=上传文件。‘content-type‘: ‘application/json‘,content: ‘请求超时,请检查

戴翔的技术 2020-06-13

安科网

在微信小程序中创建属于自己的个性弹框

liangliangshuo

liangliangshuo

相关推荐

微信小程序订阅消息-写于2020.7.26

.NET CORE3.1实现微信小程序发送订阅消息

腾讯全球数字生态大会微信专场：微信搜一搜通过三大能力打造流量增长新引擎

支付即服务、门店小程序、微信先享卡分别亮相，微信支付持续助力行业数字化升级

日活4亿，覆盖超200个细分行业，活跃服务商超4万家，“小程序经济圈”初具规模

微信小程序入口有哪些

微信小程序--路由变化对页面生命周期的影响

微信小程序生命周期

微信小程序如何修改小程序名称

CocosCreator上的游戏（调试）发布到微信小程序【转】

小程序01-目录结构

Python Flask微信小程序登录流程及登录api实现代码

微信小程序学习总结（五）常见问题实例小结

微信小程序学习总结（四）事件与冒泡实例分析

微信小程序学习总结（三）条件、模板、文件引用实例分析

微信小程序学习总结（二）样式、属性、模板操作分析

如何在微信小程序中使用骨架屏的步骤

微信小程序中的列表切换功能实例代码详解

微信小程序web-view嵌入H5页面， H5页面向小程序页面传值

微信小程序-请求、接口拦截

liangliangshuo