微信小程序开发--API界面交互
一、wx:showActionSheet(上拉菜单)
属性 类型 默认值 必填 说明 itemList Array.<string> 是 按钮的文字数组,数组长度最大为 6 itemColor string #000000 否 按钮的文字颜色 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
tapIndex number 用户点击的按钮序号,从上到下的顺序,从0开始
二、wx:showModal(弹窗)
属性 类型 默认值 必填 说明 title string 否 提示的标题 content string 否 提示的内容 showCancel boolean true 否 是否显示取消按钮 cancelText string '取消' 否 取消按钮的文字,最多 4 个字符 cancelColor string #000000 否 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 confirmText string '确定' 否 确认按钮的文字,最多 4 个字符 confirmColor string #576B95 否 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
三、showToast / hideToast(加载)
属性 类型 默认值 必填 说明 最低版本 title string 是 提示的内容 icon string 'success' 否 图标 image string 否 自定义图标的本地路径,image 的优先级高于 icon 1.1.0 duration number 1500 否 提示的延迟时间 mask boolean false 否 是否显示透明蒙层,防止触摸穿透 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
Object object
属性 类型 默认值 必填 说明 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
object.icon 的合法值
值 说明 最低版本 success 显示成功图标,此时 title 文本最多显示 7 个汉字长度 loading 显示加载图标,此时 title 文本最多显示 7 个汉字长度 none 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持
四、showLoading /hideLoading(加载)
属性 类型 默认值 必填 说明 title string 是 提示的内容 mask boolean false 否 是否显示透明蒙层,防止触摸穿透 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行) 注意
- wx.showLoading 和 wx.showToast 同时只能显示一个
- wx.showLoading 应与 wx.hideLoading 配对使用
<view class="container"> <button bindtap="onload">showActionSheet</button> <button bindtap="onModal">showModal</button> <button bindtap="onToast">showToast</button> <button bindtap="onHideToast">hideToast</button> <button bindtap="onLoading">showLoading</button> </view>
//index.js Page({ /** * 页面的初始数据 */ data: { }, onload: function() { console.log("点击了我") //交互操作组件 必须通过API的方式使用 wx.showActionSheet({ itemList: ['刺激战场', '王者荣耀', '炉石传说'], //点击其中任一项回调 success: function(res) { //res.cancel是否点击了取消、 if (!res.cancel) { //tapIndex指的是点击的下标 console.log(res.tapIndex) } } }) }, onModal: function() { wx: wx.showModal({ title: '标题', //提示的标题 content: '内容', //提示的内容 showCancel: true, //是否显示取消 cancelText: 'res', //按钮的内容,最多四个字符 cancelColor: '#ff0', //取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 confirmText: '确定', //确认按钮的文字,最多 4 个字符 confirmColor: '#666', //确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 success: function(res) { console.log('调用成功') }, //接口调用成功的回调函数 fail: function(res) { console.log('调用失败') }, //接口调用失败的回调函数 complete: function(res) { console.log('e') }, //接口调用结束的回调函数(调用成功、失败都会执行) }) }, onToast: function() { wx: wx.showToast({ title: '成功', icon: 'success', image: '', duration: 2000, mask: true, success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) }, onLoading: function() { wx: wx.showLoading({ title: '加载中', mask: true, success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }), setTimeout( function() { wx.hideLoading() }, 2000 ) }, onHideToast: function() { wx.hideToast({ success: function(res) { console.log('调用成功') } }) } })