1. 官方文档指南
1.底部弹出菜单: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html
2. 使用说明
wx.showActionSheet(Object object)
功能描述
显示底部操作菜单
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
alertText | string | 否 | 警示文案 | |
itemList |
Array. | 是 |
按钮的文字数组,数组长度最大为 6 | |
itemColor | string | #000000 | 否 | 按钮的文字颜色 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 |
---|---|---|
tapIndex |
number | 用户点击的按钮序号,从上到下的顺序,从0开始示例代码 |
3. 代码实现过程
- test.wxml
<!--pages/test/test.wxml-->
<view class="container-demo">
<button type="primary" size="mini" bind:tap="showSheet" >showActionSheet使用</button>
</view>
- test.wxss
/* pages/test/test.wxss */
.container-demo{
display: flex;
padding: 100rpx;
}
- test.js
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
},
showSheet() {
wx.showActionSheet({
itemList: ['从相册中选取', '拍照'], //按钮的文字数组,数组长度最大为 6
itemColor:"#999999", //按钮的文字颜色
success(res) {
console.log(res.tapIndex)
},
fail(res) {
console.log(res.errMsg)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})