微信小程序弹出层

1.消息提示     wx.showToast

wx.showToast({
  title: ‘成功‘,
  icon: ‘success‘,
  duration: 2000
})

2.模态弹窗 wx.showModal

wx.showModal({
  title: ‘提示‘,
  content: ‘这是一个模态弹窗‘,
  success (res) {
    if (res.confirm) {
      console.log(‘用户点击确定‘)
    } else if (res.cancel) {
      console.log(‘用户点击取消‘)
    }
  }
})
3.操作菜单  wx.showActionSheet
wx.showActionSheet({
  itemList: [‘A‘, ‘B‘, ‘C‘],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})

4.加载中  wx.showLoading

wx.showLoading({
  title: ‘加载中‘,
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)
5.自定义modal(带有表单的弹出框)

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

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

</modal>  
  1. Page({
  2. data:{
  3. hiddenmodalput:true,
  4. //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
  5. },
  6. //点击按钮痰喘指定的hiddenmodalput弹出框
  7. modalinput:function(){
  8. this.setData({
  9. hiddenmodalput: !this.data.hiddenmodalput
  10. })
  11. },
  12. //取消按钮
  13. cancel: function(){
  14. this.setData({
  15. hiddenmodalput: true
  16. });
  17. },
  18. //确认
  19. confirm: function(){
  20. this.setData({
  21. hiddenmodalput: true
  22. })
  23. }
  24. })
 


注意

 

原文地址:https://www.cnblogs.com/caoyuna/p/11478841.html

时间: 2024-11-07 06:29:52

微信小程序弹出层的相关文章

使用movable-view制作可拖拽的微信小程序弹出层效果。

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

微信小程序 - 弹出层组件

需要的可以下载示例:maskalert 原文地址:https://www.cnblogs.com/cisum/p/10421741.html

微信小程序弹出可填写框两种方法

方法一: html页面: < view class = "container" class = "zn-uploadimg" > < button type = "primary" bindtap = "modalinput" > modal有输入框 < /button> </view > < modal id = "modal" hidden = &q

微信小程序弹出和隐藏遮罩层动画以及五星评分

参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/details/56276180 https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html train.wxml <view class='train_con'> <view class='head'>

微信小程序 JS 逻辑层

丰富的API: https://developers.weixin.qq.com/miniprogram/dev/api/ 全局逻辑(app.js) 调用APP()函数,调用生命周期函数 一.生命周期函数:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. 1. onLaunch : 当小程序

微信小程序弹框wx.showModal如何修改样式

由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如下图所示: index.wxml代码: <!--index.wxml--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> &l

微信小程序开发教程(八)视图层——.wxml详解

框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ? .wxml文件用于描述页面的结构. ? .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单

{{view 视图层}}微信小程序

微信小程序 view 视图层//自学 1.数据绑定 数据绑定 WXML中的动态数据均来自对应Page的data. 简单绑定 数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于: 内容 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 组件属性(需要在双引号之内) <view id="item-{{id}}"> <

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教