如何使用微信小程序设计出一个弹出窗口

在微信小程序中,有一个组件弹窗,有很多种的形式,如提示窗、警告窗、信息窗等。其中,弹出一个窗口,可以设置录入信息或修改输入的信息等。下面利用一个实例说明弹窗的用法,操作如下:

操作方法

  • 01

    第一步,在wxml文件中插入view标签,并在这个标签内插入modal,设置对应的属性和事件,如下图所示:

  • 02

    第二步,保存代码并查看界面显示的效果,可以看到一个弹出的窗口,如下图所示:

  • 03

    第三步,在对应的页面的js文件data对象,添加隐藏属性,设置为true,如下图所示:

  • 04

    第四步,再次在Page对象中编写确定和取消事件,设置对应的隐藏属性,如下图所示:

  • 05

    第五步,在<modal></modal>下方插入一个button按钮元素,绑定对应的点击事件,如下图所示:

  • 06

    第六步,再次在js文件中插入按钮事件,保存之后预览界面,并点击按钮,如下图所示:

(0)

相关推荐

  • win8系统开机正常进入系统却弹出一个syslevelup警告窗口的原因及解决方法

    很多用户在安装windows8系统的时候都遇到这样的问题,开机正常进入系统的时候,自动弹出一个syslevelup警告窗口,显示一大串英文,很多用户都不知道如何解决,网上搜索解决方法,但是都比较复杂, ...

  • 如何设计一个弹出图

    弹出插图一直保留传统的儿童读物,虽然经常羡慕他们的触觉和身体素质.现在人们普遍接受的插画家和设计师在整个创意产业合作,采取弹出和3D技术,以增加风味,以它们的视觉概念. 弹出窗口可以添加嬉闹感,你的工 ...

  • 手机微信如何关闭屏幕顶端弹出消息

    本文将详细阐述手机微信如何关闭屏幕顶端弹出消息 操作方法 01 首先,打开手机桌面,找到"设置"按钮,点击打开它 02 然后,在打开的列表中找到"应用和通知"选 ...

  • win10插头已从插孔中拔出一直弹出

    自从从win8.1升级win10系统后,win10插头已从插孔中拔出一直弹出提示,不知道是不是只有win10才会出现的情况. 操作方法 01 我们需要打开声音管理器,可能会因为系统不一样,打开方式不同 ...

  • 微信小程序设计指南 微信小程序ui设计规范汇总

    微信小程序ui设计规范汇总: 微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用. 也体现了“用完 ...

  • 如何使用微信小程序设计和设置表格并展示数据

    在微信小程序开发时,组件中没有表格,需要根据具体的元素和样式形成表格.可以利用<view></view>和样式控制生成表格.下面利用一个实例说明,操作如下: 操作方法 01 第 ...

  • 如何在excel中做出一个弹出框

    在excel中弹出一个按钮框算是比较高级的功能,我们需要用到vba代码,不过都是比较简单的,不必担心. 操作方法 01 首先我们打开一个excel,这里我们建议使用office excel,因为wps ...

  • 电脑360开机小助手开机弹出功能怎么关闭

    360是我们在电脑上常用的安全卫士软件,虽然其中的很大一部分功能都特别有用,但是有一些功能也会影响我们的使用体验,接下来小编就教大家怎么关闭360开机小助手的开机弹出功能具体如下:1. 首先我们打开电 ...

  • 微信小程序火了,自学小程序最好用的4个方法

    随着微信小程序发布公测,关于它的讨论就没有停歇过,这几天来,我每次参加的聚会,开场总离不开小程序的话题. 前天馒头商学院的BD小粉童鞋和我聊天,谈到微信小程序的到来会对互联网运营和产品经理带来什么影响 ...