微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

① index.wxml

<button type="default" bindtap="actionSheetTap">弹出action sheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
  <block wx:for-items="{{actionSheetItems}}" wx:key="{{txt}}">
    <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
  })
 }
})

3、源代码点击此处本站下载。

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

赞 (0)

相关推荐

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序（二十二）action-sheet组件详细介绍

    微信小程序（二十二）action-sheet组件详细介绍

    action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件 主要属性: wxml <!--触发action-sheet事件--> <button type="primary" bindtap="listen

  • 微信小程序开发之圆形菜单 仿建行圆形菜单实例

    微信小程序开发之圆形菜单 仿建行圆形菜单实例

    建行APP首页有个圆形菜单.仿了个玩具出来. 功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({ data: { userInfo: {}, menuList: {},//菜单集合 animationData: {}, startPoint: {},//触摸开始

  • Android中微信小程序开发之弹出菜单

    Android中微信小程序开发之弹出菜单

    先给大家展示下效果图,具体效果图如下所示: 具体代码如下所示: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度

  • 微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 action-sheet 反馈上拉菜单简单实例 看下实现效果图: js var items = ['item1', 'item2', 'item3', 'item4'] var pageObject = { data: { actionSheetHidden: true, actionSheetItems: items }, actionSheetTap: function (e) { this.setData({ actionSheetHidden: !this.data.acti

  • 微信小程序 特效菜单抽屉效果实例代码

    微信小程序 特效菜单抽屉效果实例代码

    实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 index.wxml <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onM

  • 微信小程序 action-sheet底部菜单详解

    微信小程序 action-sheet底部菜单详解

    微信小程序 action-sheet action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件.可以在bindchange

  • 微信小程序实现跟随菜单效果和循环嵌套加载数据

    微信小程序实现跟随菜单效果和循环嵌套加载数据

    本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

  • 微信小程序 action-sheet详解及实例代码

    微信小程序 action-sheet详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序  action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance

  • 微信小程序实战之自定义抽屉菜单（7）

    微信小程序实战之自定义抽屉菜单（7）

    微信提供了动画api,就是下面这个 相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject 通过使用这个创建动画的api,可以做出很多特效出来 下面介绍一个抽屉菜单的案例 实现代码: wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-sta

随机推荐