使用wx.showActionSheetAPi实现底部弹出选择按钮
效果展示
wxml:
<!--index.wxml-->
<button type="primary" size='mini' catchtap='click'>touch</button>
CSS：
button{
margin:60rpx auto;
margin-left: 50%;
transform: translateX(-50%);
}
JS:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
hidden:true
},
click:function(){
this.setData({
hidden:false
}),
wx.showActionSheet({
itemList: ["A","B","C"],
success(res){
console.log(res.tapIndex)
},
})
}
})
补充：
好好利用这个API以及回调函数可以实现很多效果，比如页面跳转
实现页面跳转
废话不说，直接上代码（关键部分）
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
},
click:function(){
wx.showActionSheet({
itemList: ["A","B","C"],
success(res){
if(res.tapIndex==0){
wx.showActionSheet({
itemList: ["1","2"],
success(res){
wx.navigateTo({
url: '/pages/index/two',
})
}
})
}
},
})
}
})
PS：res.tapIndex表示用户点击的按钮序号，从上到下的顺序，从0开始
