将代码放在hbulder x中启动微信小程序后, 直接查看微信开发者工具中的wxml代码即可复现
2***@qq.com
- 发布：2025-11-05 15:25
- 更新：2025-11-05 15:39
- 阅读：47
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： x64
HBuilderX类型： 正式
HBuilderX版本号： 4.84
第三方开发者工具版本号： 1.06
基础库版本号： 3.9.3
项目创建方式： HBuilderX
操作步骤：
预期结果：
预期编译后为catchtouchmove="{{b?test.touchmove:null}}"
<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{b?test.touchmove:null}}" catchtouchend="{{test.touchend}}"><view style="width:100%;height:100%;padding:10px;box-sizing:border-box"><view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view></view></view>
预期编译后为catchtouchmove="{{b?test.touchmove:null}}"
<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{b?test.touchmove:null}}" catchtouchend="{{test.touchend}}"><view style="width:100%;height:100%;padding:10px;box-sizing:border-box"><view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view></view></view>
实际结果：
实际 catchtouchmove="{{dragging.value?test.touchmove:null}}
<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{dragging.value?test.touchmove:null}}" catchtouchend="{{test.touchend}}"><view style="width:100%;height:100%;padding:10px;box-sizing:border-box"><view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view></view></view>
实际 catchtouchmove="{{dragging.value?test.touchmove:null}}
<view wx:for="{{a}}" wx:for-item="item" wx:key="c" style="width:100px;height:100px;background-color:red" dragging="{{b}}" bindtouchstart="{{test.touchstart}}" catchtouchmove="{{dragging.value?test.touchmove:null}}" catchtouchend="{{test.touchend}}"><view style="width:100%;height:100%;padding:10px;box-sizing:border-box"><view style="width:100%;height:100%;background-color:#ffffff99">{{item.a}}-{{item.b}}</view></view></view>
bug描述：
<template>
<!-- #ifndef H5 -->
<view
style="width: 100px; height: 100px; background-color: red;"
v-for="(item, index) in dataList"
:dragging="dragging"
:key="item.id"
@touchstart="test.touchstart"
:catchtouchmove="dragging?test.touchmove:null"
:catchtouchend="test.touchend"
>
<view style="width: 100%; height: 100%; padding: 10px; box-sizing: border-box;">
<view style="width: 100%; height: 100%; background-color: #ffffff99;">
{{item.name}}-{{item.id}}
</view>
</view>
</view>
<!-- #endif -->
</template>
<script lang="wxs" module="test">
module.exports = {
touchstart: function(event, ownerInstance) {
ownerInstance.callMethod("switchDrag", true)
},
touchmove: function(event, ownerInstance) {
console.log("touchmove");
},
touchend: function(event, ownerInstance) {
}
};
</script>
<script setup>
import { computed, ref, watch, getCurrentInstance, onMounted } from 'vue';
const dataList = ref([{ id: 1, name: 'a', }, { id: 2, name: 'b', }])
const dragging = ref(true)
function switchDrag(value) {
dragging.value = value
console.log("@A", dragging.value);
}
defineExpose({
switchDrag,
dragging,
});
</script>dragging="dragging" 加上这一行可以看到编译成微信小程序后
变成了
dragging="{{b}}"
手动将微信小程序编译成的catchtouchmove="{{dragging.value?test.touchmove:null}}"
改成catchtouchmove="{{b?test.touchmove:null}}"
才可以生效, 是不是:catchtouchmove="dragging?test.touchmove:null"这种写法编译器没有处理, 直接当作vue3进行编译了
如果不加:dragging="dragging", 只有:catchtouchmove="dragging?test.touchmove:null" 甚至都不会映射dragging这个变量, 是不是没识别到
2***@qq.com (作者)
uniapp的vue2 版本, 和原生微信小程序都可以这样写, 编译器可以判断校验一下吗
2025-11-05 15:41
DCloud_UNI_JBB
回复 2***@qq.com: 这里会优化一下
2025-11-05 15:59
2***@qq.com (作者)
回复 DCloud_UNI_JBB: 预计啥时候会发版啊官方大大
2025-11-05 16:03
DCloud_UNI_JBB
回复 2***@qq.com: 最近会看下，修复了会同步版本到评论区
2025-11-05 17:05
2***@qq.com (作者)
回复 DCloud_UNI_JBB: 好的, 非常感谢
2025-11-05 17:08