微信小程序实现的点击按钮弹出底部上拉菜单功能示例_微信小程序底部上拉弹窗 - CSDN文库

微信小程序

39 浏览量更新于2023-05-04 评论收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序实现的点击按钮微信小程序实现的点击按钮弹出底部上拉菜单功能示例弹出底部上拉菜单功能示例

本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能。分享给大家供大家参考，具体如下：

index.wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>

<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">

<block wx:for-items="{{actionSheetItems}}">

<action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item>

</block>

<action-sheet-cancel class="cancel">取消</action-sheet-cancel>

</action-sheet>

<view>

提示：您选择了菜单{{menu}}

</view>

index.js

Page({

data:{

// text:"这是一个页面"

actionSheetHidden:true,

actionSheetItems:[

{bindtap:'Menu1',txt:'菜单1'},

{bindtap:'Menu2',txt:'菜单2'},

{bindtap:'Menu3',txt:'菜单3'}

],

menu:''

},

actionSheetTap:function(){

this.setData({

actionSheetHidden:!this.data.actionSheetHidden

})

},

actionSheetbindchange:function(){

this.setData({

actionSheetHidden:!this.data.actionSheetHidden

})

},

bindMenu1:function(){

this.setData({

menu:1,

actionSheetHidden:!this.data.actionSheetHidden

})

},

bindMenu2:function(){

this.setData({

menu:2,

actionSheetHidden:!this.data.actionSheetHidden

})

},

bindMenu3:function(){

this.setData({

menu:3,

actionSheetHidden:!this.data.actionSheetHidden

})

}

})

运行效果（调试环境问题，颜色出现了偏差，效果凑合看~）：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38592847

粉丝: 8
资源: 874

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈