微信小程序——操作反馈小工具：action-sheet的使用及详解

最新推荐文章于 2025-05-06 09:26:55 发布

啊哈嗯嗯

最新推荐文章于 2025-05-06 09:26:55 发布

阅读量5.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：学以致用文章标签：小程序 javascript css html

本文链接：https://blog.csdn.net/weixin_44937336/article/details/105393701

学以致用专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Action-Sheet组件的使用方法，包括其属性、事件绑定及数据传递方式。通过一个具体的示例，展示了如何在按钮点击事件中显示Action-Sheet，并处理用户的选择。适用于希望在应用中加入底部弹出菜单功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

action-sheet——底部弹起的操作按钮组件

属性：

bindchange：点击“取消” 或 “背景蒙层”所触发的事件
hidden：action-sheet是否可见

<action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}">
					{{item.name}}</action-sheet-item>

action-sheet-item:菜单项
bindtap：点击菜单项所出发的事件
data-name、data-id：获取到菜单项的数据
{{item.name}}：菜单项的名字
action-sheet-cancel ：“取消”、

案例：

在这里插入图片描述
点击“增加”获取数据：

全部代码：

wxml代码：

<!--index.wxml-->
<view class="container">

<button type="primary" bindtap="button">选择</button>

  <view class="ActionSheet">
    <action-sheet bindchange="actionsheetChange" hidden="{{showActionsheet}}">

       <block wx:for="{{groups}}" > 
         <action-sheet-item bindtap="itemTap" data-name="{{item.name}}" data-id="{{item.id}}">{{item.name}}</action-sheet-item>
       </block>

       <action-sheet-cancel >取消</action-sheet-cancel>

    </action-sheet>

  </view>

</view>

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showActionsheet:true,
    groups: [
      {name:'增加',id:1},
      {name:'删除',id:2},
      {name:'查询',id:3},
      {name:'修改',id:4},
    ]
  },

  button:function(){
    console.log("-------------已点击按钮-------------");
     this.setData({showActionsheet:false});
  },

  actionsheetChange:function(){
    console.log("------------点击“取消” 或 “背景蒙层”----------------");
    this.setData({showActionsheet:true});
  },

  itemTap:function(even){
    console.log(even)
  }

})