当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

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

2019年01月04日  | 移动技术网IT编程  | 我要评论

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

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
  })
 }
})

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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网