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

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

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

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

忽略部分未调整样式

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • dedecms如何去掉底部power by dedecms 链接[通俗易懂]

    dedecms如何去掉底部power by dedecms 链接[通俗易懂]dedecms在底部有个cfg_powerby 标签,在后台的系统-》系统基本参数那里面可以编辑cfg_powerby 这个标签,可是新版的更新后还会加一个powerbydedecms链接在后台设置是不起效的打开网站的/inclue/dedesql.class.php查看第588行如下$arrs1=array(0x63,0x66,0x67,0x5f,

    2022年7月13日
    14
  • 自动化运维平台功能大纲

    自动化运维平台功能大纲

    2022年5月13日
    33
  • scrapy安装步骤_scrapy安装教程

    scrapy安装步骤_scrapy安装教程Scrapy安装Scrapy的安装有多种方式,它支持Python2.7版本及以上或Python3.3版本及以上。下面说明Python3环境下的安装过程。Scrapy依赖的库比较多,至少需要依赖库有Twisted14.0,lxml3.4,pyOpenSSL0.14。而在不同平台环境又各不相同,所以在安装之前最好确保把一些基本库安装好,尤其是Windows。Anaconda这种…

    2022年9月18日
    0
  • redis集群搭建(非常详细,适合新手)_redis集群模式

    redis集群搭建(非常详细,适合新手)_redis集群模式一、基本环境首先我们需要使用VMware配置几个虚拟机,我们需要安装VMWare然后下载自己的linux镜像文件,在虚拟机上安装linux系统,vm15和centos7下载传送门提取码:lvb5。我使用的是centos764,大致步骤可以根据其他博客将第一台虚机的系统安装成功,然后直接clone这台机器就可以了,然后需要修改ip。二、准备相关软件安装包…

    2022年10月15日
    0
  • android系统的官网下载地址,Android安卓10.0系统官方正式版

    android系统的官网下载地址,Android安卓10.0系统官方正式版Android安卓10.0系统官方正式版:这是一款关于安卓的系统,没错就在今天,谷歌更新了关于安卓10.0的系统更新,相信很多的小伙伴都应该是不清楚的,应为感觉还是有很多的用户在等着系统自己的更新,没有操心这一方面的事情。Android安卓10.0系统官方正式版更新了什么功能?1、目前来看的话,更新功能还是蛮多的,但是用户能够看的上的就不言而喻;2、毕竟以前放出来的消息就是这一次更新将会有可能安卓…

    2022年6月19日
    50
  • format(format c)

    a-antemeridiemandpostmeridiemd-dayofmonth(noleadingzero)dd-dayofmonth(twodigit)o-dayofyear(noleadingzeros)oo-dayofyear(threedigit)D-daynameshortDD-…

    2022年4月10日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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