当我滚动uni-app scroll-view时并开启scroll监听后，滚动到底部新增数据后会触发click函数

替换 node_modules/@dcloudio/uni-mp-compiler/dist/transforms/vOn.js 为下面的内容试试能不能解决问题
“use strict”;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { “default”: mod };
};
Object.defineProperty(exports, “__esModule”, { value: true });
exports.wrapperVOn = exports.transformOn = void 0;
const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
const compiler_core_1 = require("@vue/compiler-core");
const shared_1 = require("@vue/shared");
const crypto_1 = __importDefault(require(“crypto”));
const __1 = require("…");
const runtimeHelpers_1 = require("…/runtimeHelpers");
const transformExpression_1 = require("./transformExpression");
const vFor_1 = require("./vFor");
const utils_1 = require("./utils");
const fnExpRE = /^\s*([\w$_]+|(async\s*)?([^)]?))\s=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*(/;
const transformOn = (dir, node, _context, augmentor) => {
const context = _context;
const { loc, modifiers, arg } = dir;
if (!dir.exp && !modifiers.length) {
context.onError((0, compiler_core_1.createCompilerError)(compiler_core_1.ErrorCodes.X_V_ON_NO_EXPRESSION, loc));
}
let eventName;
if (arg.type === compiler_core_1.NodeTypes.SIMPLE_EXPRESSION) {
if (arg.isStatic) {
const rawName = arg.content;
// for all event listeners, auto convert it to camelCase. See issue #2249
eventName = (0, compiler_core_1.createSimpleExpression)((0, shared_1.toHandlerKey)((0, shared_1.camelize)(rawName)), true, arg.loc);
}
else {
// #2388
eventName = (0, compiler_core_1.createCompoundExpression)([
// ${context.helperString(TO_HANDLER_KEY)}(,
arg,
// ),
]);
}
}
else {
// already a compound expression.
eventName = arg;
eventName.children.unshift(${context.helperString(compiler_core_1.TO_HANDLER_KEY)}();
eventName.children.push());
}
// handler processing
let exp = dir.exp;
if (exp && !exp.content.trim()) {
exp = undefined;
}
let shouldCache = context.cacheHandlers && !exp && !context.inVOnce;
if (exp) {
const isMemberExp = (0, compiler_core_1.isMemberExpression)(exp.content, context);
const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content));
const hasMultipleStatements = exp.content.includes(;);
// process the expression since it’s been skipped
if (context.prefixIdentifiers) {
isInlineStatement && context.addIdentifiers($event);
exp = dir.exp = (0, transformExpression_1.processExpression)(exp, context, false, hasMultipleStatements);
isInlineStatement && context.removeIdentifiers($event);
// with scope analysis, the function is hoistable if it has no reference
// to scope variables.
shouldCache =
context.cacheHandlers &&
// unnecessary to cache inside v-once
!context.inVOnce &&
// runtime constants don’t need to be cached
// (this is analyzed by compileScript in SFC <script setup>)
!(exp.type === compiler_core_1.NodeTypes.SIMPLE_EXPRESSION && exp.constType > 0) &&
// #1541 bail if this is a member exp handler passed to a component -
// we need to use the original function to preserve arity,
// e.g. <transition> relies on checking cb.length to determine
// transition end handling. Inline function is ok since its arity
// is preserved even when cached.
!(isMemberExp && node.tagType === compiler_core_1.ElementTypes.COMPONENT) &&
// bail if the function references closure variables (v-for, v-slot)
// it must be passed fresh to avoid stale values.
!(0, compiler_core_1.hasScopeRef)(exp, context.identifiers) &&
// wxs event
!(0, utils_1.isFilterExpr)(exp, context);
// If the expression is optimizable and is a member expression pointing
// to a function, turn it into invocation (and wrap in an arrow function
// below) so that it always accesses the latest value when called - thus
// avoiding the need to be patched.
if (shouldCache && isMemberExp) {
if (exp.type === compiler_core_1.NodeTypes.SIMPLE_EXPRESSION) {
exp.content = ${exp.content} && ${exp.content}(...args);
}
else {
exp.children = […exp.children, &&, …exp.children, (...args)];
}
}
}
if (isInlineStatement || (shouldCache && isMemberExp)) {
// wrap inline statement in a function expression
exp = (0, compiler_core_1.createCompoundExpression)([
${isInlineStatement ? context.isTS ?($event: any):$event:${context.isTS ? \n//@ts-ignore\n : ``}(…args)} => ${hasMultipleStatements ?{:(},
exp,
hasMultipleStatements ? } : ),
]);
}
}
let ret = {
props: [
(0, compiler_core_1.createObjectProperty)(eventName, exp || (0, compiler_core_1.createSimpleExpression)(() => {}, false, loc)),
],
};
// apply extended compiler augmentor
if (augmentor) {
ret = augmentor(ret);
}
// TODO
if (shouldCache) {
// cache handlers so that it’s always the same handler being passed down.
// this avoids unnecessary re-renders when users use inline handlers on
// components.
// ret.props[0].value = wrapper(
// context.cache(ret.props[0].value) as ExpressionNode,
// context
// )
ret.props[0].value = wrapperVOn(ret.props[0].value, node, context);
}
else {
ret.props[0].value = wrapperVOn(ret.props[0].value, node, context);
}
// mark the key as handler for props normalization check
ret.props.forEach(§ => (p.key.isHandlerKey = true));
return ret;
};
exports.transformOn = transformOn;
function wrapperVOn(value, node, context) {
if ((0, transformExpression_1.isBuiltInIdentifier)(value)) {
return value;
}
// wxs event
if ((0, utils_1.isFilterExpr)(value, context)) {
return value;
}
const keys = [];
if (context.miniProgram.event?.key && context.inVFor) {
let keyProp = (0, compiler_core_1.findProp)(node, ‘key’);
if (!keyProp) {
const vForScope = (0, vFor_1.parseVForScope)(context.currentScope);
if (vForScope) {
keyProp = (0, compiler_core_1.findProp)(vForScope.node, ‘key’);
}
}
// 对 for 中的所有事件增加 key 标记，避免微信小程序不更新事件对象
if (keyProp && (0, uni_cli_shared_1.isDirectiveNode)(keyProp) && keyProp.exp) {
const keyCode = (0, __1.genExpr)(keyProp.exp);
if (keyCode) {
keys.push(’,’);
keys.push((0, __1.genExpr)(keyProp.exp));
}
}
}
// 给事件添加一标识，避免小程序事件覆盖问题 (question/198957)
const eventHashId = crypto_1.default
.createHash(‘sha256’)
.update(JSON.stringify(value), ‘utf8’)
.digest(‘hex’)
.slice(0, 2);
if (keys.length === 0) {
keys.push(, "${eventHashId}");
}
const newExpr = (0, compiler_core_1.createCompoundExpression)([
${context.helperString(runtimeHelpers_1.V_ON)}(,
value,
…keys,
),
]);
// 保存原始事件表达式
// @ts-expect-error 内部 parseVOn 时使用
newExpr.__withoutKeysVOnExpr = (0, compiler_core_1.createCompoundExpression)([
${context.helperString(runtimeHelpers_1.V_ON)}(,
value,
),
]);
return newExpr;
}
exports.wrapperVOn = wrapperVOn;

回复 9***@qq.com: 你清缓存了吗？

这个问题是由于在滚动到底部触发数据加载时，新增的列表项可能与点击事件产生了冲突。在uni-app中，scroll-view滚动到底部触发数据加载时，可能会误触发click事件。

解决方案：

1. 在scroll-view上添加:scroll-with-animation="false"属性，禁用滚动动画
2. 在scroll-view上添加[@touchstart](/user/touchstart)="onTouchStart"和[@touchend](/user/touchend)="onTouchEnd"来区分滚动和点击
3. 使用touch事件替代click事件

推荐修改方案：

<template>
<scroll-view scroll-y class="session-list-container" 
  [@scroll](/user/scroll)="onScroll" 
  [@scrolltoupper](/user/scrolltoupper)="onScrolltoupper"
  [@scrolltolower](/user/scrolltolower)="getList" 
  v-if="list.length > 0" 
  :throttle="false"
  :scroll-with-animation="false"
  [@touchstart](/user/touchstart)="onTouchStart"
  [@touchend](/user/touchend)="onTouchEnd">
  <view class="session-list-item" v-for="(item) in list" [@click](/user/click)="handleClickSession(item)">
    {{ item }}
  </view>
</scroll-view>
</template>

<script setup>
import { ref } from 'vue';

const isScrolling = ref(false);
let touchTimer = null;

const onTouchStart = () => {
  isScrolling.value = false;
};

const onTouchEnd = () => {
  // 短时间内结束触摸认为是点击，长时间是滚动
  clearTimeout(touchTimer);
  touchTimer = setTimeout(() => {
    isScrolling.value = true;
  }, 100);
};

const handleClickSession = (item) => {
  if (isScrolling.value) return;
  
  console.log('handleClickSession');
  uni.showToast({
    title: 'handleClickSession被触发',
    icon: 'none',
  });
};
</script>