当前位置：首页 > uni-app

uniapp 长按菜单

2026-02-05 22:26:20uni-app

实现长按菜单的方法

在UniApp中实现长按菜单功能，可以通过以下几种方式实现，具体取决于需求场景和平台兼容性。

使用@longpress事件绑定 通过监听元素的长按事件触发菜单显示。示例代码：

<template>
  <view @longpress="showMenu">长按此处显示菜单</view>
  <view v-if="showMenuFlag" class="menu">
    <button @click="handleOption1">选项1</button>
    <button @click="handleOption2">选项2</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showMenuFlag: false
    }
  },
  methods: {
    showMenu() {
      this.showMenuFlag = true
    },
    handleOption1() {
      console.log('选择选项1')
      this.showMenuFlag = false
    },
    handleOption2() {
      console.log('选择选项2')
      this.showMenuFlag = false
    }
  }
}
</script>

使用官方ActionSheet组件 适用于需要原生样式的菜单。示例代码：

<template>
  <view @longpress="showActionSheet">长按显示ActionSheet</view>
</template>

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

自定义弹出菜单组件 创建可复用的自定义菜单组件。示例组件代码：

<template>
  <view>
    <slot @longpress="toggleMenu"></slot>
    <view v-if="visible" class="custom-menu">
      <view v-for="(item, index) in items" :key="index" @click="handleClick(item)">
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

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

平台差异注意事项

微信小程序 需注意showActionSheet的样式和行为可能与H5端不同，测试时需覆盖多平台。

H5端 长按事件可能触发浏览器的默认菜单，可通过阻止默认事件避免：

@longpress.prevent="showMenu"

APP端 可使用原生插件实现更丰富的菜单效果，如plus.nativeUI.actionSheet。

样式优化建议

为菜单添加过渡动画提升用户体验：

uniapp 长按菜单

.custom-menu {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
}
.custom-menu[v-if] {
  opacity: 1;
  transform: translateY(0);
}