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弹框的更多相关文章

  1. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  2. 微信小程序底部弹框动画

    在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...

  3. 微信小程序之----弹框组件modal

    modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 ...

  4. [组件封装]微信小程序-底部弹框

    描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...

  5. 微信小程序之弹框modal

    官方文档 <modal hidden="{{hidden}}" title="这里是title" confirm-text="自定义确定按钮&q ...

  6. 微信小程序下拉框

    微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <vie ...

  7. 微信小程序-修改单选框和复选框大小的方法

    方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...

  8. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  9. 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法

    异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...

随机推荐

  1. orcale创建用户、授权

    Oracle创建用户.角色.授权.建表 一.首先使用SYSTEM进行登录 oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system privilege )可以让用 ...

  2. spring只是一个框架

    想跟着 spring in action 4 系统的研究下spring,结果发现忘了怎么建一个spring项目. 关键是,不知道该建一个什么项目,Java项目?Maven项目(Java项目?Web项目 ...

  3. -lpthread和-pthread的区别

    编译程序包括 预编译, 编译,汇编,链接,包含头文件了,仅能说明有了线程函数的声明, 但是还没有实现, 加上-lpthread是在链接阶段,链接这个库.<stdio.h>等都是静态库,不需 ...

  4. 【Java面试题】45 什么是java序列化,如何实现java序列化?或者请解释Serializable接口的作用。

    我们有时候将一个java对象变成字节流的形式传出去或者从一个字节流中恢复成一个java对象,例如,要将java对象存储到硬盘或者传送给网络上的其他计算机,这个过程我们可以自己写代码去把一个java对象 ...

  5. [精]Odoo 8.0深入浅出开发教程-模块开发基础

    參考资料点击这里. 构建Odoo模块 模块组成 业务对象 业务对象声明为Python类, 由Odoo自己主动加载. 数据文件 XML或CSV文件格式, 在当中声明了元数据(视图或工作流).配置数据(模 ...

  6. 【matlab】error:试图访问 im2(1,1211);由于 size(im2)=[675,1210],索引超出范围。

    试图访问 im2(1,1211):由于 size(im2)=[675,1210],索引超出范围. 出错 dect (line 14) if abs((im2(i,j))-(im1(i,j)))> ...

  7. JavaScript 取对象的值时用点和中括号的区别

    用点的时候 点后面是对象的真实属性名称, 用中括号的时候 中括号里面是变量或者字符串

  8. VS2008远程调试操作方法

    前言 最近遇到一个问题:组态王在本地调试机上运行正常,但在远程测试机上运行却出现了崩溃.本机上装有Visual Studio 2008,测试机上则没有.于是,在网上找资料,想利用远程调试方法,在本机上 ...

  9. win7 64位下android开发环境的搭建

    本文转自:http://www.cfanz.cn/index.php?c=article&a=read&id=65289 最近换了新电脑,装了win7 64位系统,安装了各种开发环境, ...

  10. Extjs学习笔记--(三,调试技巧)

    FireFox 1.firedebug(略) 2.illuminations 在illuminations页面可也看到缩写的extjs的代码,同时可以进行相应的调试 3,Firedebug AutoC ...