一、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('调用成功')
}
})
}
})
原文出处:https://www.cnblogs.com/DreamchaserHe/p/11208155.html
来源:oschina
链接:https://my.oschina.net/u/4409332/blog/3258840