uniapp 长按菜单

长按菜单实现方法

在UniApp中实现长按菜单功能，可以通过以下几种方式完成：

使用@longpress事件监听 通过绑定@longpress事件来触发菜单显示，适合基础需求：

<template>
  <view @longpress="showMenu">长按显示菜单</view>
  <view v-if="menuVisible" class="menu-popup">
    <text @click="handleMenu(1)">选项1</text>
    <text @click="handleMenu(2)">选项2</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuVisible: false
    }
  },
  methods: {
    showMenu() {
      this.menuVisible = true
    },
    handleMenu(index) {
      console.log('选择选项', index)
      this.menuVisible = false
    }
  }
}
</script>

使用uni.showActionSheet API 调用官方提供的底部操作菜单接口，样式统一且支持多端：

methods: {
  showActionMenu() {
    uni.showActionSheet({
      itemList: ['选项A', '选项B', '选项C'],
      success: (res) => {
        console.log('选中项索引:', res.tapIndex)
      }
    })
  }
}

自定义弹出菜单组件 创建可复用的自定义组件实现更灵活的菜单样式：

<!-- components/long-press-menu.vue -->
<template>
  <view>
    <slot @longpress="toggleMenu"></slot>
    <view v-if="visible" class="custom-menu">
      <view v-for="(item,index) in items" :key="index" @click="selectItem(index)">
        {{ item.text }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: Array
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    toggleMenu() {
      this.visible = !this.visible
    },
    selectItem(index) {
      this.$emit('select', index)
      this.visible = false
    }
  }
}
</script>

注意事项

• 在H5端自定义菜单时需注意z-index层级问题
• 小程序平台部分API存在样式限制，需测试多端兼容性
• 长按事件在iOS设备上可能有300ms延迟，可通过CSS解决：

  .menu-target {
  -webkit-touch-callout: none;
  user-select: none;
  }

扩展功能

实现带图标的菜单项：

uni.showActionSheet({
  itemList: ['★ 收藏', '⎘ 分享', '✎ 编辑'],
  success(e) {
    console.log(e.tapIndex)
  }
})

添加菜单取消回调：

uni.showActionSheet({
  itemList: ['选项1', '选项2'],
  fail(err) {
    console.log('取消选择', err)
  }
})