在uni-app uni-list-item组件在安卓app端只触发一次@longpress事件

开发环境	版本号	项目创建方式
Windows	10 22H2	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.87

手机系统：Android

手机系统版本号：Android 13

手机厂商：OPPO

手机机型：A55

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>  
    <view>  
        <view style="padding: 15px;">  
            <uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="searchTxt" placeholder="搜索网盘文件"  
                @iconClick="getFolders"></uni-easyinput>  
        </view>  
        <view style="padding: 0 15px;margin-bottom: 10px;" v-if="hisFolders.length > 1">  
            <uni-breadcrumb separator="/">  
                <uni-breadcrumb-item v-for="(folder,index) in hisFolders" :key="index">  
                    {{folder.itemName}}  
                </uni-breadcrumb-item>  
            </uni-breadcrumb>  
        </view>  
        <view>  
            <uni-list>  
                <template v-for="item in folders">  
                    <template>  
                        <uni-list-item :title="item.originalName || item.itemName" :note="item.createTime"  
                            :thumb="'../../static/images/pan/' + getfileType(item) + '.png'" thumb-size="base"  
                            :key="item.id" :ellipsis="1" clickable @click.native="showFile(item)"  
                            [@longpress](/user/longpress).native="(e)=>getFileMenu(item,e)" />  
                    </template>  
                </template>  
            </uni-list>  
        </view>  
        <uni-popup ref="popup_newfolder" background-color="#fff" style="height:300px" :is-mask-click="false">  
            <view style="height:300px">  
                <view>  
                    <uni-nav-bar shadow left-icon="left" leftText="返回" rightText="完成" title="新建目录"  
                        @clickLeft="clickLeft" @clickRight="clickRight" />  
                </view>  
                <view style="text-align: center;padding-top: 20px;">  
                    <image style="width: 100px; height: 100px; background-color: #fff;" mode="scaleToFill"  
                        src="../../static/images/pan/folder.png"></image>  
                </view>  
                <view style="padding: 20px;">  
                    <uni-easyinput v-model="itemName" focus placeholder="新建目录"  
                        style="text-align: center;"></uni-easyinput>  
                </view>  
            </view>  
        </uni-popup>  
        <uni-popup ref="popup_newfile" background-color="#fff" style="height:300px" :is-mask-click="false">  
            <view style="height:300px">  
                <view>  
                    <uni-nav-bar shadow left-icon="left" leftText="返回" title="上传文件" @clickLeft="clickLeft"  
                        @clickRight="clickRight" />  
                </view>  
                <view class="example-body">  
                    <view style="padding: 20px;margin: 0 auto;">  
                        <button @click="testf">选择文件</button>  
                    </view>  
                </view>  
            </view>  
        </uni-popup>  
        <view>  
            <uni-fab ref="fab" :horizontal="horizontal" :vertical="vertical" :direction="direction" :content="content"  
                @fabClick="fabClick" @trigger="trigger" />  
        </view>  
        <view>  
        </view>  

        <!-- 长按菜单弹窗 -->  
        <uni-popup ref="popup_menu" type="bottom" background-color="transparent" :is-mask-click="false">  
            <view class="menu-container">  
                <!-- 简单的文件信息显示 -->  
                <view class="menu-item info-item" style="background-color: #f5f5f5;">  
                    <text class="menu-text">{{ currentFileName }}</text>  
                </view>  
                <view class="menu-item" @click="downloadFile()">  
                    <uni-icons type="download" size="20" color="#333"></uni-icons>  
                    <text class="menu-text">下载</text>  
                </view>  
                <view class="menu-item" @click="renameFile()">  
                    <uni-icons type="compose" size="20" color="#333"></uni-icons>  
                    <text class="menu-text">重命名</text>  
                </view>  
                <view class="menu-item" @click="deleteFile()">  
                    <uni-icons type="trash" size="20" color="#ff4d4f"></uni-icons>  
                    <text class="menu-text delete-text">删除</text>  
                </view>  
                <view class="menu-item menu-cancel" @click="closeMenu">  
                    <uni-icons type="close" size="20" color="#333"></uni-icons>  
                    <text class="menu-text">取消</text>  
                </view>  
            </view>  
        </uni-popup>  
    </view>  
</template>

操作步骤：

长按uni-list-item弹出popup，点击取消关闭popup，再长按uni-list-item

预期结果：

再次弹出popup并传递item和event

实际结果：

没有进入getFileMenu函数

bug描述：

我在uni-list-item组件中加入[@longpress](/user/longpress).native，用来长按触发getFileMenu函数弹出popup组件。关闭popup组件后再次长按uni-list-item无法触发长按事件函数getFileMenu。

更多关于在uni-app uni-list-item组件在安卓app端只触发一次@longpress事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

更多关于在uni-app uni-list-item组件在安卓app端只触发一次@longpress事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这个问题是 uni-app 在 Android 平台上的一个已知事件处理问题。@longpress.native 事件在 Android 端确实存在只触发一次的情况，特别是在配合弹窗组件使用时。

原因分析： 当长按触发弹窗后，弹窗会捕获焦点和触摸事件。关闭弹窗后，原始的 uni-list-item 可能没有正确恢复事件监听，导致后续的长按事件无法触发。

解决方案：

使用 @touchstart 和 @touchend 模拟长按事件

<uni-list-item 
    :title="item.originalName || item.itemName" 
    :note="item.createTime"
    :thumb="'../../static/images/pan/' + getfileType(item) + '.png'" 
    thumb-size="base"
    :key="item.id" 
    :ellipsis="1" 
    clickable 
    @click="showFile(item)"
    @touchstart="handleTouchStart(item, $event)"
    @touchend="handleTouchEnd(item, $event)"
/>

data() {
    return {
        longPressTimer: null,
        longPressDelay: 500 // 长按时间阈值
    }
},
methods: {
    handleTouchStart(item, e) {
        this.longPressTimer = setTimeout(() => {
            this.getFileMenu(item, e)
        }, this.longPressDelay)
    },
    handleTouchEnd() {
        clearTimeout(this.longPressTimer)
    },
    getFileMenu(item, e) {
        // 清除定时器
        clearTimeout(this.longPressTimer)
        this.currentFileName = item.originalName || item.itemName
        this.currentFile = item
        this.$refs.popup_menu.open()
    },
    closeMenu() {
        this.$refs.popup_menu.close()
        // 重置当前文件信息
        this.currentFileName = ''
        this.currentFile = null
    }
}

使用 @longtap 替代 @longpress

<uni-list-item 
    @longtap="getFileMenu(item, $event)"
/>

添加 :key 强制重新渲染 在关闭弹窗后，可以强制重新渲染列表项：

closeMenu() {
    this.$refs.popup_menu.close()
    // 强制更新列表
    this.$forceUpdate()
}

使用 uni.$on 和 uni.$emit 解耦事件

// 在页面加载时监听
onLoad() {
    uni.$on('showFileMenu', this.handleShowMenu)
},
onUnload() {
    uni.$off('showFileMenu', this.handleShowMenu)
},
methods: {
    getFileMenu(item, e) {
        uni.$emit('showFileMenu', { item, e })
    },
    handleShowMenu(data) {
        this.currentFileName = data.item.originalName || data.item.itemName
        this.currentFile = data.item
        this.$refs.popup_menu.open()
    }
}