微信小程序 --- model弹框
model弹框:在屏幕中间弹出,让你进行选择:
效果:

代码:
<button type="primary" bindtap="btnclick">按钮</button>
<modal title="标题" confirm-text="确认" cancel-text="取消" hidden="onOff" bindconfirm="modalConfirm" bindcancel="modalCancel">
这里是会话内容
</modal>
page.js:
//获取应用实例
const app = getApp()
Page({
data: {
onOff:true
},
btnclick:function(){
var onOff = this.data.onOff;
this.setData({onOff:!onOff});
}
})
还可以使用JS:
btnclick:function(){
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
具体的参数:
title:提示的标题;
content:提示的内容;
showCancel :是否显示取消按钮,默认是 false
canceText:取消按钮的文字,默认是 “取消”
canceColor:取消按钮的文字颜色,默认是 #000
confirmText:确定按钮的文字。默认是 确定
confirmColor:确定按钮的文字颜色。默认是 “#3CC5IF”
success:接口调用成功的回调函数。返回 res.confirm ==1时,表示用户点击。
fail:接口调用失败的回调函数。
complete:接口调用结束的回调函数(调用成功或者失败都会执行)
微信小程序 --- model弹框的更多相关文章
- 关于微信小程序 modal弹框组件的介绍
微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...
- 微信小程序底部弹框动画
在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...
- 微信小程序之----弹框组件modal
modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...
- [组件封装]微信小程序-底部弹框
描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...
- 微信小程序之弹框modal
官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...
- 微信小程序下拉框
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <vie ...
- 微信小程序-修改单选框和复选框大小的方法
方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...
- 【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...
- 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法
异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...
随机推荐
- Hadoop集群作业调度算法
转自:http://blog.csdn.net/chen_jp/article/details/7983076 Hadoop集群中有三种作业调度算法,分别为FIFO,公平调度算法和计算能力调度算法 先 ...
- 关于PHP开发所需要的工具和环境
0.notepad++ 一个类型记事本的软件,用来看安装的部署说明命令. 1.虚拟机 在虚拟机里面操作,本机不会被影响. 2.CentOS系统 类似Linux的系统,在里面安装PHP,Nginx,ph ...
- 【转】Microsoft .Net Remoting 之.Net Remoting基础篇
.Net Remoting基础篇 一.Remoting基础 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remoting就是DCOM的一种升级, ...
- Spring 4 官方文档学习(十一)Web MVC 框架
介绍Spring Web MVC 框架 Spring Web MVC的特性 其他MVC实现的可插拔性 DispatcherServlet 在WebApplicationContext中的特殊的bean ...
- C++泛型和算法
看书的速度终于慢了下来,倒不是难于理解,而是需要理解的东西有点多. 先吐槽下C++Primer这本书,不少地方都是用抽象的语言进行介绍! 拜托,你这是介绍,不是总结! 像容器适配器那里: “本质上,适 ...
- ANSI 标准是为了确保 C++ 的便携性
ANSI 标准ANSI 标准是为了确保 C++ 的便携性 —— 您所编写的代码在 Mac.UNIX.Windows.Alpha 计算机上都能通过编译. 由于 ANSI 标准已稳定使用了很长的时间,所有 ...
- REFLECTOR和FILEDISASSEMBLER的下载与使用
.NET Reflector 下载地址 http://www.aisto.com/roeder/dotnet FileDisassembler 下载地址 http://www.denisbauer.c ...
- linux -- ubuntu14.10安装gnome桌面环境和dock工具
ubuntu14.10系统自带Unity桌面环境,但是还是习惯于gnome桌面环境,再加上dock用着就很顺手了. 方法/步骤 首先,按Ctrl+Alt+T,调出终端.在其中输入:sudo apt ...
- 【Java面试题】2 Java中使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变?超详细解析
/* * 问题:使用final关键字修饰一个变量时,是引用不能变,还是引用的对象不能变 * 答: * 使用final关键字修饰一个变量时,是指引用变量不能变,引用变量所指向的对象中的内容还是可以改变的 ...
- JavaScript-事件冒泡简介及应用
一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事 ...