当前位置：首页 > JavaScript

js实现actionsheet

2026-01-31 19:52:33JavaScript

实现 ActionSheet 的基本思路

使用纯 JavaScript 实现 ActionSheet 需要创建一个浮层，包含多个操作按钮和一个取消按钮。通过 CSS 控制动画效果和布局，JavaScript 处理点击事件和显示/隐藏逻辑。

HTML 结构示例

<div class="action-sheet">
  <div class="action-sheet-mask"></div>
  <div class="action-sheet-container">
    <div class="action-sheet-content">
      <div class="action-sheet-item">选项1</div>
      <div class="action-sheet-item">选项2</div>
      <div class="action-sheet-item">选项3</div>
    </div>
    <div class="action-sheet-cancel">取消</div>
  </div>
</div>

CSS 样式

.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

.action-sheet-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.action-sheet-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

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

.action-sheet-content {
  margin-bottom: 8px;
  border-radius: 10px 10px 0 0;
  background-color: #fff;
}

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

.action-sheet-item:last-child {
  border-bottom: none;
}

.action-sheet-cancel {
  padding: 15px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
}

JavaScript 控制逻辑

// 显示 ActionSheet
function showActionSheet() {
  const actionSheet = document.querySelector('.action-sheet');
  actionSheet.classList.add('show');
}

// 隐藏 ActionSheet
function hideActionSheet() {
  const actionSheet = document.querySelector('.action-sheet');
  actionSheet.classList.remove('show');
}

// 绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 点击选项
  document.querySelectorAll('.action-sheet-item').forEach(item => {
    item.addEventListener('click', function() {
      console.log('选择了:', this.textContent);
      hideActionSheet();
    });
  });

  // 点击取消
  document.querySelector('.action-sheet-cancel').addEventListener('click', hideActionSheet);

  // 点击遮罩
  document.querySelector('.action-sheet-mask').addEventListener('click', hideActionSheet);
});

// 触发显示 ActionSheet 的按钮
document.getElementById('showActionSheetBtn').addEventListener('click', showActionSheet);

动态创建 ActionSheet

如果需要动态创建 ActionSheet，可以使用以下函数：

js实现actionsheet

function createActionSheet(items) {
  const actionSheet = document.createElement('div');
  actionSheet.className = 'action-sheet';

  const html = `
    <div class="action-sheet-mask"></div>
    <div class="action-sheet-container">
      <div class="action-sheet-content">
        ${items.map(item => `<div class="action-sheet-item">${item}</div>`).join('')}
      </div>
      <div class="action-sheet-cancel">取消</div>
    </div>
  `;

  actionSheet.innerHTML = html;
  document.body.appendChild(actionSheet);

  // 绑定事件
  actionSheet.querySelector('.action-sheet-mask').addEventListener('click', () => {
    actionSheet.remove();
  });

  actionSheet.querySelector('.action-sheet-cancel').addEventListener('click', () => {
    actionSheet.remove();
  });

  actionSheet.querySelectorAll('.action-sheet-item').forEach(item => {
    item.addEventListener('click', () => {
      console.log('选择了:', item.textContent);
      actionSheet.remove();
    });
  });

  // 显示
  setTimeout(() => {
    actionSheet.classList.add('show');
  }, 0);

  return actionSheet;
}

// 使用示例
createActionSheet(['选项1', '选项2', '选项3']);