1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮 弹出底部上拉菜单功能示例...

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

时间:2022-08-15 09:23:31

相关推荐

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

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

index.wxml

弹出action sheet

{{item.txt}}

取消

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

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

})

}

})

运行效果(调试环境问题,颜色出现了偏差,效果凑合看~):

ps:关于微信小程序组件相关说明还可查看微信小程序组件说明表:

希望本文所述对大家微信小程序开发有所帮助。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。