uni-app uni-list-item组件在钉钉小程序端不触发longpress事件

uni-app uni-list-item组件在钉钉小程序端不触发longpress事件

产品分类：

uniapp/小程序

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10教育版19044.2130

HBuilderX类型：

正式

HBuilderX版本号：

4.08

第三方开发者工具版本号：

支付宝最新小程序开发工具

基础库版本号：

最新

项目创建方式：

HBuilderX

示例代码：

<uni-list border-full>  
    <uni-list-item v-for="(dev,index) in devList" :title="dev.sn" :note="'首次登录时间: ' + dev.firstLoginTime +  
    '\n最后登录时间: ' + dev.lastLoginTime" :rightText="dev.version?dev.version:''"   
    clickable showArrow :to="'/pages/cloud/detect/index/index?sn=' + dev.sn" [@longpress](/user/longpress)="addWhitelist(dev)">  
        <template v-slot:footer>  
            <view class="list-item-right-box">  
                <view style="margin-bottom: 5rpx;">  
                    <uni-badge :text="dev.onLineState?'在线':'离线'" :type="dev.onLineState?'primary':'warning'"></uni-badge>  
                    <uni-badge v-if="dev.hasExistBlackList" text="黑名单" custom-style="backgroundColor: #3a3a3a"></uni-badge>  
                </view>  
                <view style="margin-top: 5rpx;">{{dev.version?dev.version:''}}</view>  
            </view>  
        </template>  
    </uni-list-item>  
</uni-list>

操作步骤：

使用uni-list-item绑定@longpress，按照教程文档编译运行成钉钉小程序运行。长按list列表

预期结果：

不触发绑定函数，没有打印函数中console的内容

实际结果：

与预期结果一致

bug描述：

使用uni-ui的uni-list-item组件，在组件上绑定@longpress事件。app、web移动端、微信小程序都能正确触发长按事件，但是在钉钉小程序端不能触发事件


更多关于uni-app uni-list-item组件在钉钉小程序端不触发longpress事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我在app里也不能触发@longpress时间，请教一下怎么解决

更多关于uni-app uni-list-item组件在钉钉小程序端不触发longpress事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，uni-list-item 组件默认并不直接支持 longpress 事件。longpress 事件通常用于处理长按操作，但在某些小程序平台（如钉钉小程序）上，可能由于平台差异或实现限制，导致该事件无法正常触发。

解决方案

  1. 使用 @touchstart 和 @touchend 手动实现长按事件

    你可以通过监听 touchstart 和 touchend 事件来手动实现长按逻辑。以下是一个简单的示例：

    <template>
  <uni-list>
    <uni-list-item
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      列表项
    </uni-list-item>
  </uni-list>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null,
    };
  },
  methods: {
    handleTouchStart() {
      this.pressTimer = setTimeout(() => {
        this.handleLongPress();
      }, 1000); // 1秒后触发长按事件
    },
    handleTouchEnd() {
      clearTimeout(this.pressTimer);
    },
    handleLongPress() {
      console.log('长按事件触发');
      // 在这里处理长按逻辑
    },
  },
};
</script>

    在这个示例中，handleTouchStart 方法会在用户按下时启动一个定时器，如果在指定时间内（例如 1 秒）用户没有松开手指，则认为触发了长按事件。handleTouchEnd 方法用于清除定时器，防止在用户松开手指后误触发长按事件。

  2. 使用 @longpress 事件（如果支持）

    如果你的 uni-list-item 组件支持 longpress 事件，可以尝试直接使用：

    <template>
  <uni-list>
    <uni-list-item @longpress="handleLongPress">
      列表项
    </uni-list-item>
  </uni-list>
</template>

<script>
export default {
  methods: {
    handleLongPress() {
      console.log('长按事件触发');
      // 在这里处理长按逻辑
    },
  },
};
</script>
回到顶部