使用微信小程序开发弹出框应用实例详解

article/2025/9/18 17:01:26

1

2

3

4

5

view class="container" class="zn-uploadimg">

<button type="primary"bindtap="showok">消息提示框</button>  

<button type="primary"bindtap="modalcnt">模态弹窗</button> 

<button type="primary"bindtap="actioncnt">操作菜单</button>

 </view>

1.消息提示——wx.showToast(OBJECT)

1

2

3

4

5

6

7

8

9

10

11

12

//show.js

//获取应用实例

var app = getApp()

Page({

    showok:function() {

        wx.showToast({

            title: '成功',

            icon: 'success',

            duration: 2000

        })

    }

})

2.模态弹窗——wx.showModal(OBJECT)

1

2

3

4

5

6

7

8

9

10

11

12

//show.js

//获取应用实例

var app = getApp()

Page({

    showok:function() {

        wx.showToast({

            title: '成功',

            icon: 'success',

            duration: 2000

        })

    }

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//show.js

//获取应用实例

var app = getApp()

Page({

    modalcnt:function(){

        wx.showModal({

            title: '提示',

            content: '这是一个模态弹窗',

            success: function(res) {

                if (res.confirm) {

                console.log('用户点击确定')

                } else if (res.cancel) {

                console.log('用户点击取消')

                }

            }

        })

    }

})

3.操作菜单——wx.showActionSheet(OBJECT)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//show.js

//获取应用实例

var app = getApp()

Page({

    actioncnt:function(){

        wx.showActionSheet({

            itemList: ['A', 'B', 'C'],

            success: function(res) {

                console.log(res.tapIndex)

            },

            fail: function(res) {

                console.log(res.errMsg)

            }

        })

    }

})

4.指定modal弹出

指定哪个modal,可以通过hidden属性来进行选择。

1

2

3

4

5

6

7

8

9

<!--show.wxml-->

<view class="container" class="zn-uploadimg">

<button type="primary"bindtap="modalinput">

modal有输入框

</button>

</view>

<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">

 <input type='text'placeholder="请输入内容" auto-focus/>

</modal>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

//show.js

//获取应用实例

var app = getApp()

Page({

    data:{

  hiddenmodalput:true,

  //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框

 },

    //点击按钮痰喘指定的hiddenmodalput弹出框

    modalinput:function(){

        this.setData({

         hiddenmodalput: !this.data.hiddenmodalput

        })

    },

    //取消按钮

    cancel: function(){

  this.setData({

   hiddenmodalput: true

  });

 },

 //确认

 confirm: function(){

  this.setData({

      hiddenmodalput: true

     })

 }

})


http://chatgpt.dhexx.cn/article/xvsPPe7B.shtml

相关文章

小程序代码示例整理

以下是分享了一部分小程序的代码示例&#xff0c;希望能够帮助到你们&#xff0c;抓紧收藏吧 微信小程序知乎日报 https://github.com/myronliu347/wechat-app-zhihudaily 微信小程序购物车案例 https://github.com/SeptemberMaples/wechat-weapp-demo 微信小程序–聊天室…

微信小程序开发实例

一、注册小程序账号 1.进入微信公众平台&#xff08;https://mp.weixin.qq.com/&#xff09;&#xff0c;注册小程序账号&#xff0c;根据提示填写对应的信息即可。2.注册成功后进入首页&#xff0c;在 小程序发布流程->小程序开发与管理->配置服务器中&#xff0c;点击…

微信小程序之登录界面示例

注&#xff1a;这里使用的是原生微信小程序 微信小程序之登录界面示例 使用wxss和wxml index.wxml文件中代码 <view class"v1"><!-- v2父容器 子view使用绝对布局 --><view class"v2"><view class"dltext">登录<…

一个微信小程序开发示例

一个微信小程序开发示例&#xff08;豆瓣电影&#xff09; 新版本&#xff08;不包含工作流&#xff09;请移步至&#xff1a;https://github.com/zce/weapp-douban当前仓库会暂缓更新&#xff0c;主要留下来给大家答疑需要基础教程的朋友们稍等一阵吧&#xff0c;目前有计划重…

微信小程序实例系列

实战 【微信小程序】---- redux 在原生微信小程序的使用实例【微信小程序】---- weapp-redux的使用文档【微信小程序】---- Promise.then(success, fail)执行顺序的问题【微信小程序】---- 监听页面停止滚动【微信小程序】---- CustomBar 公用组件封装微信小程序----开发rui-s…

微信小程序作品实例

目录 简介 作品详情 作品代码 一、主页界面 1、WXML文件: 2、WXSS文件: 3、JS文件 4、JSON文件: 5、补充 二、购物车界面 1、WXML文件 3、JS文件 4、JSON文件 三、分类界面和个人中心界面 简介 这是我在学习完微信小程序后&#xff0c;写的一个小案例&#xff0c;是…

微信小程序开发之——微信小程序示例

一 概述 除了WeUI组件库&#xff0c;官方进行了扩展&#xff0c;包含组件库、扩展能力、接口和云开发示例 项目地址在线预览码预览界面miniprogram-demo 二 如何使用小程序示例 2.1 小程序示例——tabs 官方示例下的tabs位置 miniprogram-demo-master\miniprogram\page\we…

微信小程序相关操作示例

微信小程序相关操作示例 wxml-写页面for指令绑定事件数据绑定获取当前用户相关信息的方式跳转展示用户信息表单提交键盘输入的控制 js-写方法初始数据&#xff08;字典&#xff09;&#xff1a;方法函数&#xff1a;存储图片到云开发平台存储访问服务器的request方式获取当前用…

小程序-demo:小程序示例

ylbtech-小程序-demo&#xff1a;小程序示例 1.返回顶部 0、 1、app.js const openIdUrl require(./config).openIdUrlApp({onLaunch: function () {console.log(App Launch)},onShow: function () {console.log(App Show)},onHide: function () {console.log(App Hide)},glo…

Toast与Snackbar的那点事

背景 Toast是Android平台上的常用技术。从用户角度来看&#xff0c;Toast是用户与App交互最基本的提示控件&#xff1b;从开发者角度来看&#xff0c;Toast是开发过程中常用的调试手段之一。此外&#xff0c;Toast语法也非常简单&#xff0c;仅需一行代码。基于简单易用的优点…

Flutter之SnackBar原理详解

初次学习SnackBar控件&#xff0c;第一反应就是这货怎么感觉跟Android的Toast一样&#xff01;使用起来确实简单&#xff0c;但是其内部原理扒拉出来到时能学到一点东西&#xff0c;下面就细细的剖析这个组件。 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时&am…

Android Material Design 系列之 Snackbar 使用详解

前言 本文是 Material Design 系列第二篇&#xff1a;SnackBar 的提出实际上介于 Toast 和 Dialog 的中间产物&#xff0c;SnackBar 提供有关操作的轻量级反馈&#xff0c;它们在移动设备的屏幕底部显示一条简短消息。SnackBar 出现在屏幕上所有其他元素的上方&#xff0c;一次…

Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用 介绍 Snackbar可以说是Toast的升级版&#xff0c;不仅有显示信息的功能&#xff0c;还可以添加一个Action&#xff0c;实现点击功能&#xff0c;可以右滑删除。 效果图 Snackbar是Android Support Design Library库支持的一个控件&#xff0c…

安卓之SnackBar

SnackBar SnakeBar与Toast相似&#xff0c;不过SnakeBar可以与用户进行交互。 不过首先需要在app/bulid.gradle中添加一句依赖&#xff0c;操作方法如下 点击这个灯泡&#xff0c;选择Add Library dependency然后添加下面的依赖 implementation com.android.support:design:2…

使用Snackbar!——Android Snackbar花式使用指南

使用Snackbar!——Android Snackbar花式使用指南 本文是在《Design Support Library第三部分&#xff1a;Snackbar样式》和《Snackbar使用及其注意事项》两篇文章的启发下而来&#xff0c;首先对两篇文章的作者表示感谢。 Snackbar是Android Support Design Library库中的一个控…

Android 中的自定义 Snackbar

前言 Snackbars 在 Android 应用程序中很常见。几乎每个应用程序都使用 Snackbars 来显示有关应用程序中正在发生的事情的一些信息。您可以将 Snackbar 视为 Android 中 Toasts 的替代品或更好的版本。 默认情况下&#xff0c;Snackbar 显示在屏幕底部&#xff0c;它出现在屏…

Snackbar的使用

最近看到Material Design中的Snackbar&#xff0c;跟Toast很相似。似乎效果比原生的Toast好写(当然我们也可以自定义Toast成Snackbar的效果)&#xff0c;至于Snackbar特别深入的定制目前了解甚少&#xff0c;所以这里简单记录一下常用的。 效果图 下面看一下效果 这里面加了个…

Android Snackbar控件

1. Snackbar类 Snackbar是5.0版本出现的控件&#xff0c;类似于Toast&#xff0c;显示在屏幕的底部&#xff0c;包含文字信息与一个可选的操作按钮。需要添加Design依赖库&#xff0c;并且使用Theme.AppCompat主题。 2. 创建Snackbar类 Snackbar利用静态方法make()来创建实…

Android Snackbar简单解析

偶然间发现android中有Snackbar类&#xff0c;还是有点意思&#xff0c;类似于toast。与toast相比&#xff0c;最明显的区别是:Snackbar只能在屏幕底部显示。其他用法基本与toast相似。 先来张效果图吧&#xff0c;静态图&#xff1a; 大概的用法呢&#xff1f;&#xff1a; S…

android Snackbar新控件解析

Dialog和Toast&#xff0c;我们在日常的开发中一定非常熟悉&#xff0c;常常被用来作为Android应用内提示性信息的两种展示方式。然而Google在Design包中又提供了一种新的选择&#xff0c;那就是Snackbar。今天主要介绍Snackbar新控件的使用&#xff0c;以及三种提示信息展示方…