小程序弹框组件_小程序怎么创建

小程序弹框组件_小程序怎么创建在微信小程序中创建属于自己的个性弹框

大家好,又见面了,我是你们的朋友全栈君。

微信小程序提供的弹框模版就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控制
然后就可以在弹框中写自己想要展示的效果啦!

忽略部分未调整样式

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107017.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux用telnet判断端口是否通

    Linux用telnet判断端口是否通通的[root@1222~]#telnet127.0.0.14531Trying127.0.0.1…Connectedto127.0.0.1.Escapecharacteris’^]’.不通[root@1222~]#telnet127.0.0.14581Trying127.0.0.1…telnet:connecttoaddress127.0.0.1:Connectionrefused退出方式1.输入Ctrl+】键,然后

    2022年10月22日
  • java三元运算符怎么用_按位运算符

    java三元运算符怎么用_按位运算符Java提供了一个三元运算符,可以同时操作3个表达式。三元运算符语法格式如下:判断条件?表达式1:表达式2在上述语法格式中,当判断条件成立时,计算表达式1的值作为整个表达式的结果,否则计算表达式2的值作为整个表达式的结果。三元运算符的功能与if…else语法相同,但是使用三元运算符可以简化代码。例如,求两个数x、y中的较大者,如果用if.else语句来实现,具体代码如下:Intx=0;inty=1;intmax;if(x>y){max=x;}el

    2022年10月20日
  • pthread_t定义结构

    pthread_t定义结构

    2021年12月31日
  • 解决Mysql 的Access denied for user’root’@’localhost’ (using password: NO)问题

    解决Mysql 的Access denied for user’root’@’localhost’ (using password: NO)问题解决Win10下Mysql的Accessdeniedforuser’root’@’localhost’(usingpassword:YES)问题mysql一旦忘记密码即会出现这样的错误。解决步骤如下(注意cmd命令窗口必须以管理员身份打开)mysql一旦忘记密码即会出现这样的错误。解决步骤如下(注意cmd命令窗口必须以管理员身份打开)停掉mysql服务netsto…

  • 导入maven项目总报错,Eclipse中Maven工程缺少Maven Dependencies

    导入maven项目总报错,Eclipse中Maven工程缺少Maven Dependencies原因如果是: Eclipse在引入Maven工程后,找不到MavenDependencies。使得代码报错,具体如下图所示:而正常的maven项目是这样的要解决这样的问题,就是重新加载,使maven的jar导入即可。有多种方法。而这里介绍一超强的方法。如图具体步骤:右击Mavenproject–>Macven–>EnableDependencyMa

  • ASP.NET 使用Ajax

    ASP.NET 使用Ajax之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的Sc

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号