uni-app uni-ui 示例多次列表点击到详情会连续跳两次

uni-app uni-ui 示例多次列表点击到详情会连续跳两次

开发环境 版本号 项目创建方式
Mac 15.5 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.66

手机系统：Android

手机系统版本号：Android 15

手机厂商：小米

手机机型：Redmi K70

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

  1. 通过插件市场，导入uni-ui。
  2. 安卓真机运行
  3. 如视频操作 第6秒开始，快速点击列表中的两个不同新闻行。会连续进两个不同的详情。

预期结果： 快速点击列表中的两个不同新闻行。只有点击的第一个行内容才能跳转到详情，紧接着的快速点击第二个行内容 不应该响应。因为这个时候正在进行第一个的路由跳转

实际结果： 快速点击列表中的两个不同新闻行。会连续进两个不同的详情。

bug描述：

快速点击列表中的两个不同新闻行。会连续进两个不同的详情。

<view class="uni-list-cell" hover-class="uni-list-cell-hover" [@click](/user/click)="goDetail(value)">
    <view class="uni-media-list">
        <image class="uni-media-list-logo" :src="value.cover"></image>
        <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{ value.title }}</view>
            <view class="uni-media-list-text-bottom">
                <text>{{ value.author_name }}</text>
                <text>{{ value.published_at }}</text>
            </view>
        </view>
    </view>
</view>

更多关于uni-app uni-ui 示例多次列表点击到详情会连续跳两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

可以给点击事件增加防抖函数 控制一下就行了

更多关于uni-app uni-ui 示例多次列表点击到详情会连续跳两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


加了也不好使，因为每个行都是都是一个vue实例，会触发不同的函数对象。加防抖只会放大这个现象。你自己可以试一下先

无论如何感谢你的回复

回复 1***@163.com: 确实跟你说的一样 可以改用节流 试试效果

节流 效果

节流可以保证只跳转一个，但是并不是用户第一个点击的事件相应。我提出这个BUG，就是因为实际应用中，存在用户点击一个内容行之后，会有误触的场景（我们的内容行高大，容易误触）。我试了原生iOS和Android ，调用跳转的api之后，用户根本就没有机会误触，不知道咋做到的。目前分析下来，感觉是uni-app框架中，逻辑层和展示层的js通信卡了一下，不知道这个猜测对不对

这个问题是由于快速连续点击触发了多次路由跳转导致的。在uni-app中，页面跳转动画期间仍然可以响应新的点击事件。

解决方案：

  1. 使用防抖函数控制点击频率
data() {
  return {
    isJumping: false
  }
},
methods: {
  async goDetail(item) {
    if (this.isJumping) return;
    
    this.isJumping = true;
    try {
      await uni.navigateTo({
        url: '/pages/detail/detail?id=' + item.id
      });
    } catch (e) {
      console.error(e);
    }
    // 设置适当延迟确保跳转完成
    setTimeout(() => {
      this.isJumping = false;
    }, 500);
  }
}
  1. 使用节流函数替代防抖
import { throttle } from '@/utils/util';

methods: {
  goDetail: throttle(function(item) {
    uni.navigateTo({
      url: '/pages/detail/detail?id=' + item.id
    });
  }, 1000)
}
  1. 在页面onShow中重置状态
onShow() {
  this.isJumping = false;
}
回到顶部