当前位置：首页 > JavaScript

js实现actionsheet

2026-03-13 17:48:38JavaScript

实现 ActionSheet 的基本思路

ActionSheet 是一种常见的移动端 UI 组件，用于从底部弹出选项菜单。在 JavaScript 中可以通过 HTML 和 CSS 配合实现，也可以使用现成的 UI 库。

使用纯 JavaScript 实现

创建基本的 HTML 结构，包含触发按钮和 ActionSheet 容器：

<button id="showActionSheet">显示菜单</button>
<div class="action-sheet">
  <div class="action-sheet-content">
    <div class="action-sheet-item">选项一</div>
    <div class="action-sheet-item">选项二</div>
    <div class="action-sheet-item action-sheet-cancel">取消</div>
  </div>
</div>

添加 CSS 样式控制显示和动画效果：

js实现actionsheet

.action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  display: none;
  z-index: 1000;
}

.action-sheet-content {
  background: white;
  border-radius: 10px 10px 0 0;
  padding: 10px 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.action-sheet.show .action-sheet-content {
  transform: translateY(0);
}

.action-sheet-item {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.action-sheet-cancel {
  margin-top: 5px;
  border-top: 1px solid #eee;
  border-bottom: none;
}

JavaScript 控制显示/隐藏逻辑：

const btn = document.getElementById('showActionSheet');
const actionSheet = document.querySelector('.action-sheet');

btn.addEventListener('click', () => {
  actionSheet.classList.add('show');
  actionSheet.style.display = 'block';
});

actionSheet.addEventListener('click', (e) => {
  if (e.target.classList.contains('action-sheet-item')) {
    console.log('选择了:', e.target.textContent);
  }
  actionSheet.classList.remove('show');
  setTimeout(() => {
    actionSheet.style.display = 'none';
  }, 300);
});

使用 UI 库快速实现

如果项目中使用 UI 框架，可以更快速地实现 ActionSheet：

js实现actionsheet

使用 Vant 组件库（Vue）:

import { ActionSheet } from 'vant';

// 显示 ActionSheet
ActionSheet([
  { name: '选项一' },
  { name: '选项二' },
  { name: '取消', subname: '描述信息', color: '#ee0a24' }
]);

使用 Ant Design Mobile（React）:

import { ActionSheet } from 'antd-mobile';

ActionSheet.showActionSheetWithOptions({
  options: ['选项一', '选项二', '取消'],
  cancelButtonIndex: 2,
  maskClosable: true,
}, (buttonIndex) => {
  console.log(buttonIndex);
});

实现进阶功能

对于更复杂的需求，可以考虑以下增强功能：

添加图标支持，在每个选项前显示图标
实现分组显示，不同类别的选项用分隔线隔开
添加标题栏，说明 ActionSheet 的用途
支持异步加载选项内容
添加动画效果，如弹簧动画、淡入淡出等

// 进阶示例：带图标的 ActionSheet
function showAdvancedActionSheet() {
  const items = [
    { text: '拍照', icon: 'camera' },
    { text: '从相册选择', icon: 'photo' },
    { text: '取消', icon: 'close' }
  ];

  // 创建 DOM 并显示
  // ...
}