博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在微信小程序中创建属于自己的个性弹框
阅读量:6503 次
发布时间:2019-06-24

本文共 287 字,大约阅读时间需要 1 分钟。

微信小程序提供的弹框模版就3种:

1、消息提示框
clipboard.png
对应的效果是这样的

clipboard.png

这一种ui我们可以改变的额只有icon、image、title
2、模拟对话框

clipboard.png

对应的效果是这样的:
clipboard.png
这一种做一些危险操作的提示之类等
3、显示操作菜单

clipboard.png

对应效果如下:

clipboard.png

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

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

clipboard.png

以下是代码贴图

clipboard.png

最外层的phoneWin样式主要是写后面的遮罩层,content就是具体的弹框区域

clipboard.png

弹框的显示隐藏用wx:if控制
然后就可以在弹框中写自己想要展示的效果啦!

忽略部分未调整样式

转载地址:http://tfqyo.baihongyu.com/

你可能感兴趣的文章
Docker 1.12实践:Docker Service、Stack与分布式应用捆绑包
查看>>
idea + plantuml 画流程图
查看>>
应用生命周期终极 DevOps 工具包
查看>>
Angularjs之国际化
查看>>
VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
查看>>
vue-validator demo
查看>>
jquery ajax学习笔记
查看>>
CSS魔法堂:Absolute Positioning就这个样
查看>>
chrome扩展demo1-小时钟
查看>>
如何优雅地使用 Sublime Text
查看>>
如何邀请好友注册您的网站(模拟百度网盘)
查看>>
十年未变!安全,谁之责?(下)
查看>>
React中的“虫洞”——Context
查看>>
驱动程序原理
查看>>
AzureCon上微软宣布了哪些容器相关的重磅消息
查看>>
Android Studio:GIT提交项目到远程仓库
查看>>
SegmentFault for Android 3.0 发布
查看>>
Windows 7 用户已开始收到停止支持的提醒
查看>>
vue自定义指令实现v-tap插件
查看>>
Hibernate主键生成策略及选择
查看>>