小程序确定取消弹窗_小程序开发之弹出框

小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框

wx.showToast()

title:显示的提示信息,在没有图标的情况下,文本内容可显示两行

icon:  显示的图标

success:成功图标

loading:加载图标

none:没有图标

image:自定义显示的图标,优先级高于icon

duration:延迟的时间,弹出框弹出后的显示时间

mask:true/false是否显示遮罩层

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:不管成功还是失败都会执行的函数

注:一般在点击事件中调用,可结合使用wx.hideTotast来使用,

wx.showLoading()

title:加载的提示信息eg:玩命加载中...

mask:是否现思遮罩层

success:接口调用成功的回调函数

fail:接口调用失败的回调函数

complete:无论成功还是失败都会执行的函数

注:一般需要结合使用wx.hideLoading();来使用可分别在onLoad和onReady中使用,数据渲染完成后关闭

wx.showModal()

title:提示信息的标题

content:提示信息的内容

showCancel:true/false是否显示取消按钮

cancelText:取消按钮的文本内容,不得超过四个字符

cancelColor:取消按钮的文本颜色,默认#000000

confirmText:确认按钮的文本内容,不得超过四个字符

confirmColor:却惹按钮的文本颜色,默认#000000

success:接口成功的回调

fail:接口失败的回调

complete:无论成功或失败都会嗲用

注:一般带年纪确认或取消,我们需要在success中进行事件的判断处理

wx.showModal({

title: '提示',

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

success: function(res) {

if (res.confirm) {

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

} else if (res.cancel) {

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

}

}

})

wx.showActionSheet()

itemList: 底部弹出的信息元素为数组。

success:成功的回调

fail:失败的回调

wx.showActionSheet({

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

success: function(res) {

console.log(res.tapIndex)

},

fail: function(res) {

console.log(res.errMsg)

}

})

注:bug是当数组中的元素较多时,弹出框的高度会很高,且不能上下滑动,因此,大家可以看我总结的小程序开发之组件的简单使用,这篇中我有总结弹出框组件的封装。

这里的话需要用到小程序自带的picker组件,picker一共分为三类

普通选择器:mode = selector

range:下拉列表的数据,为一个obj或array。只有当mode=selector或者 mode= multiSelector时有效。

range-key:当range为对象时,range-key用来指定显示对象的哪一个属性上的属性值

value:下拉项的下标,可通过改变该属性来实现确定后数据的对应渲染。

bindchange:value改变时触发

bindcancel:取消或者点击遮罩层的时候触发

disabled:true/false是否禁用

当前选择:{{array[index]}}

Page({

/**

*array:普通选择器下拉的数据

*index:默认显示的时下标为0的数据

*/

data: {

array: ['美国', '中国', '巴西', '日本'],

index: 0,

},

bindPickerChange: function (e) {

console.log('picker下拉项发生变化后,下标为:', e.detail.value)

this.setData({

index: e.detail.value

})

},

})

多列选择器:mode = multiSelector

range:下拉列表的数据,通过二位三位数组来表示对应列的数据。只有当mode=selector或者 mode= multiSelector时有效。

range-key: 当 range是一个 二维Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value:是一个数组,依次对应每一列的下标。从0开始

bindchange:点击确定后触发的事件,返回当前的所有列的行元素所在的下标

bindcolumnchange:value改变时触发,返回的值为第几列第几行下标发生变化。

bindcancel:取消选择或点击遮罩层时触发

多列选择器

当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}

Page({

/**

*multiArray:多列选择的二位数组

*multiIndex:默认显示的每列的下标

*/

data: {

multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],

multiIndex: [0, 0, 0],

},

bindMultiPickerChange: function (e) {

this.setData({

multiIndex: e.detail.value

})

},

bindMultiPickerColumnChange: function (e) {

console.log(e);

var data = {

multiArray: this.data.multiArray,

multiIndex: this.data.multiIndex

};

data.multiIndex[e.detail.column] = e.detail.value;

switch (e.detail.column) {

case 0:

switch (data.multiIndex[0]) {

case 0:

data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];

data.multiArray[2] = ['猪肉绦虫', '吸血虫'];

break;

case 1:

data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];

data.multiArray[2] = ['鲫鱼', '带鱼'];

break;

}

data.multiIndex[1] = 0;

data.multiIndex[2] = 0;

break;

case 1:

switch (data.multiIndex[0]) {

case 0:

switch (data.multiIndex[1]) {

case 0:

data.multiArray[2] = ['猪肉绦虫', '吸血虫'];

break;

case 1:

data.multiArray[2] = ['蛔虫'];

break;

case 2:

data.multiArray[2] = ['蚂蚁', '蚂蟥'];

break;

case 3:

data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];

break;

case 4:

data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];

break;

}

break;

case 1:

switch (data.multiIndex[1]) {

case 0:

data.multiArray[2] = ['鲫鱼', '带鱼'];

break;

case 1:

data.multiArray[2] = ['青蛙', '娃娃鱼'];

break;

case 2:

data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];

break;

}

break;

}

data.multiIndex[2] = 0;

// console.log(data.multiIndex);

break;

}

this.setData(data);

},

})

时间选择器:mode = time

value:表示选中的时间,时间格式为 hh:mm

start:表示时间的开始点,格式为hh:mm

end:表示时间的街书店,格式为hh:mm

bindchange:点击确定的时候触发,返回value值,返回的是选中的时间,

bindcancel:点击取消时或点击遮罩层时触发

disabled:true/false是否禁用

时间选择器

当前选择: {{time}}

Page({

/**

*time:选择的时间

*/

data: {

time: '12:01',

},

bindTimeChange: function (e) {

// console.log('picker发送选择改变,携带值为', e.detail.value)

console.error(e);

this.setData({

time: e.detail.value

})

},

})

日期选择器:mode = data

value: 表示选中的日期,格式为"YYYY-MM-DD"

start: 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"

end: 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"

fields:参数(year,month,day)表示日期的粒度,为year时,下拉下标只显示年份选择,为month时会显示year,month,为day时会显示year,month,day

bindchange:点击确定的时候触发,返回的值为选择的时间

bindcancel:点击取消时或点击遮罩层时触发

disabled:true/false是否禁用

日期选择器

当前选择: {{date}}

Page({

/**

*data:选择的日期

*/

data: {

date: '2016-09-01',

},

bindDateChange: function (e) {

console.log('picker发送选择改变,携带值为', e.detail.value)

this.setData({

date: e.detail.value

})

},

})

省市区选择器:mode = region

value:  表示选中的省市区,默认选中每一列的第一个值

custom-item: 可为每一列的顶部添加一个自定义的项

start: 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"

end: 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"

fields:参数(year,month,day)表示日期的粒度,为year时,下拉下标只显示年份选择,为month时会显示year,month,为day时会显示year,month,day

bindchange:点击确定的时候触发, value 改变时触发 change 事件,event.detail = {value: value, code: code, postcode: postcode},其中字段code是统计用区划代码,postcode是邮政编码

bindcancel:点击取消时或点击遮罩层时触发

disabled:true/false是否禁用

省市区选择器

当前选择:{{region[0]}},{{region[1]}},{{region[2]}}

Page({

/**

*time:选择的时间

*/

data: {

region: ['广东省', '广州市', '海珠区'],

customItem: "全部"

},

bindRegionChange: function (e) {

console.log('picker发送选择改变,携带值为', e.detail.value)

this.setData({

region: e.detail.value

})

}

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jOOQ与Hibernate:何时选择哪个

Hibernate已成为Java生态系统中的事实上的标准,事实上, 如果标准对您很重要 ,并且如果您将JCP与ISO,ANSI,IEEE等置于同一级别,那么Hibernate也是实际的JavaEE标准实现。 本文的目的不是讨论标准&#xff0…

【IE6的疯狂之四】IE6文字溢出BUG

在IE6下使用浮动可能会出现文字重复的情况. 在IE6下&#xff0c;浮动层之间有注释文字的话&#xff0c;之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制&#xff0c;但是代码里查看文字可并没有多出来。 看个例子&#xff1a; XML/HTML代码<!DOCTYPE html PUBLIC ”…

html中左侧播放器插件,简洁实用的html5音乐播放器插件

js代码window.onload function(){MC.music({hasAjax:false,left:50%,bottom:50%,musicChanged:function(ret){// alert(ret.url);// getMusic_buffer(ret.url);// return;var data ret.data;var index ret.index;var imageUrl data[index].img_url;var music_bg document.…

linux怎么才能算telnet成功_怎么表白才算成功呢

要怎样表白才算成功呢&#xff1f;其实如果对方也有点喜欢你的&#xff0c;对你有点感觉的&#xff0c;不管怎样表白&#xff0c;你都会成功的&#xff0c;相反&#xff0c;如果对方本身就对你没感觉的&#xff0c;不管你要怎么轰轰烈烈的表白&#xff0c;你都不会成功。下面&a…

我们真的仍然需要32位JVM吗?

即使到了今天&#xff08;2015年&#xff09;&#xff0c;我们仍然有两个版本或Oracle HotSpot JDK –已调整为32或64位体系结构。 问题是我们是否真的想在服务器甚至笔记本电脑上使用32位JVM&#xff1f; 我们应该有很受欢迎的意见&#xff01; 如果只需要较小的堆&#xff0c…

html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法

本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;JavaScript实现文字与图片的拖拽效果*{padding:0;margin:0;}.tips{position:absolute;background:#eee;}图片可以拖动脚本之家拖动链接也可以var $idfunction(id){r…

ccf命令行选项只能用c实现_CCF-201403-3-命令行选项

问题描述试题编号&#xff1a;201403-3试题名称&#xff1a;命令行选项时间限制&#xff1a;1.0s内存限制&#xff1a;256.0MB问题描述&#xff1a;问题描述请你写一个命令行分析程序,用以分析给定的命令行里包含哪些选项。每个命令行由若干个字符串组成,它们之间恰好由一个空格…

python data frame_Python dataframer包_程序模块 - PyPI - Python中文网

数据框尝试将任何文件加载到pandas数据帧中&#xff0c;以最少的配置&#xff0c;关注生物信息学示例通常&#xff0c;您将从磁盘读取文件(open(my-file.txt, rb))。但是字节流在这里更简单。>>> from io import BytesIO>>> from dataframer import datafram…

html设置页面的高度和宽度,web显示页面有图像上设置高度和宽度很重要

因此即使浏览器只有HTML&#xff0c;它仍然能够分配适当的空间。所以我们可以修改成以下内容&#xff1a;最近我们发现谷歌浏览器对图片设置有一定的修改&#xff0c;它主要在图像上进行设置width和设置height属性&#xff0c;以防止布局发生变化并改善网站访问者的体验。Web性…

lsnrctl 与 tnsnames.ora 的联系

平台&#xff1a;Windoxs XPOracle 11G 当使用oralce的 Net Manager创建了一个名为“L3”的Listener后&#xff0c;要想使用lsnrctl启动和关闭 L3 还必须在tnsnames.ora 中配置一个名为L3的条目. listener.ora L3 (DESCRIPTION (ADDRESS (PROTOCOL TCP)(HOST princess…

Java EE,Docker和Maven(技术提示#89)

Java EE应用程序通常使用Maven构建和打包。 例如&#xff0c; github.com/javaee-samples/javaee7-docker-maven是一个普通的Java EE 7应用程序&#xff0c;它显示了Java EE 7依赖性&#xff1a; <dependencies><dependency><groupId>javax</groupId>…

mysql数据库计算全部女生_使用mysql存储过程-统计某个数据库下的所有表的记录数...

使用mysql存储过程-统计某个数据库下的所有表的记录数其中用到了游标(cursor)&#xff0c;循环(loop)&#xff0c;动态SQL预处理(prepare)等技术&#xff0c;特此记录一下。[sql]viewplaincopy1.CREATEPROCEDUREstatis_rows(inv_schemavarchar(50))2.BEGIN3.4.5.DECLAREsql_str…

区县级政府网站群建设要点

区县政府单位虽小&#xff0c;但行政职能齐全&#xff0c;作为服务机构&#xff0c;公民最先接触的也是区县政府&#xff0c;大部分的群众办事在区县里就可以完成&#xff1b;上级政府部门相对于区县来说&#xff0c;管理的职能要高于服务的职能&#xff0c;所以区县对公民的重…

html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...

可以跨页面使用HTML5 Web SQL数据库吗&#xff1f;(Can HTML5 Web SQL databases be used across pages?)这可能是一个非常简单的问题&#xff0c;请原谅我的无知&#xff0c;但是可以跨同一个域的页面读取Web SQL数据库吗&#xff1f;例如&#xff0c;如果我在页面上插入数据…

如何监视Java EE数据源

介绍 FlexyPool是一个开放源代码框架&#xff0c;可以监视数据源连接的使用情况。 由于我们以前缺乏对供应连接池的支持&#xff0c;因此该工具是不必要的。 FlexyPool最初是为独立环境设计的&#xff0c;并且DataSource代理配置是通过编程完成的。 使用Spring bean别名 &…

磁盘空间管理工具FolderSizes

现在的硬盘已经到了用TB来计量的级别&#xff0c;但也会感觉在不知不觉间空间竟然不够用了&#xff01;到底什么东西占用了我们这么多的磁盘空间呢? 这个软件可以帮你快速进行分析。FolderSizes 企业版是一款优秀的磁盘管理工具&#xff0c;它可以有效地帮助我们快速的查看并统…

vscode修改python终端_panda3d是python的一个高级的3D 渲染和游戏开发框架

1 介绍1.1 开发维护者:迪士尼VR工作室和卡耐基梅隆娱乐技术中心。1.2 是一个3D游戏引擎和一个 3D 渲染和游戏开发库。1.3 可以在这个框架下使用 Python 和 C 。1.4 Panda3D 是开源软件&#xff0c; 它的许可证让它可以用于任何用途&#xff0c; 包括商业用途。1.5 是python的三…

HTMl和css项目总结,HTML+CSS项目开发总结

好几天没更新博客了&#xff0c;刚实战完一个HTMLCSS的简单项目。经过几天的摸索&#xff0c;发现收益良多。之前只是单纯得写demo&#xff0c;看知识点&#xff0c;没有亲自实战项目。但实战过后才会了解&#xff0c;如何才能更好地提升自己的技术。针对这次项目开发&#xff…

Apache Camel日志组件示例

Apache Camel日志组件示例 您要将消息记录到底层的记录机制&#xff0c;请使用骆驼的log:组件。 Camel使用sfl4j作为记录器API&#xff0c;然后允许您配置记录器实现。 在本文中&#xff0c;我们将使用Log4j作为实际的记录器机制。 让我们从示例开始。 依存关系 您需要添加&am…

HDU--4768

题目&#xff1a; Flyer 原题链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4768 分析&#xff1a;二分。只需要注意到最多只有一个为奇数&#xff0c;则可以首先求出学生获得的总的传单数&#xff0c;为奇数时&#xff0c;二分找到答案。 1 #include<cstdio&…