uniapp showactionsheet的使用方法

在uniapp中使用showActionSheet时，如何自定义选项的样式？官方文档只提供了基本用法，但我想修改按钮颜色、字体大小等样式，试过直接修改CSS但没效果。另外，如何实现点击选项后跳转到不同页面？求具体代码示例和实现思路。

2 回复

在uniapp中，使用uni.showActionSheet显示操作菜单。示例代码：

uni.showActionSheet({
  itemList: ['选项A', '选项B', '选项C'],
  success: function (res) {
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  }
});

参数包括itemList（选项列表）、success（成功回调）等。


UniApp 中的 showActionSheet 是一个用于显示操作菜单的 API，类似于底部弹出的选择列表。它常用于让用户从多个选项中选择一个操作。

基本用法

在页面中调用 uni.showActionSheet 方法，传入配置对象（如选项列表和回调函数）。

代码示例

uni.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'], // 菜单项数组，必填
  success: (res) => {
    // 用户点击选项后的回调，res.tapIndex 为点击项的索引（从0开始）
    console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
  },
  fail: (err) => {
    // 取消选择或调用失败时的回调
    console.log('取消或失败', err);
  }
});

参数说明

  • itemList：字符串数组，定义菜单项内容（必填）。
  • success：成功回调函数，返回 tapIndex（选中项索引）。
  • fail：失败回调（如用户取消选择）。
  • 可选参数：itemColor（菜单项颜色，默认 “#000000”）。

注意事项

  • 菜单项数量建议不超过 6 个，避免显示不全。
  • 用户点击蒙层或取消按钮会触发 fail 回调。
  • 适用于需要快速选择的场景（如分享、删除确认）。

直接在 methods 或事件中调用即可，无需额外引入。

回到顶部