NervJS/taro

使用了 linaria CSS in JS View组件设置catchMove={true} 编译之后还是bindtouchmove

Open

#11,664 创建于 2022年4月18日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)TypeScript (37,306 star) (4,897 fork)batch import
F-reactT-weappV-3good first issuewalk-around

描述

相关平台

微信小程序

小程序基础库: 2.23.3 使用框架: React

复现步骤

const Container = styled(View) position: fixed; background-color: #3578e5; right: 0; bottom: 24rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center;

<Container onTouchStart={onTouchStart} catchMove={true} onTouchMove={onTouchMove} onTouchCancel={onTouchCancel} onTouchEnd={onTouchEnd} style={{ bottom: Taro.pxTransform(bottom), right: Taro.pxTransform(right), width: Taro.pxTransform(contentWidth), height: Taro.pxTransform(contentHeight) }}>

期望结果

catchtouchmove而不是bindtouchmove

实际结果

bindtouchmove

环境信息

👽 Taro v3.4.4

validFiles []

  Taro CLI 3.4.4 environment info:
    System:
      OS: macOS 12.2.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
      npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.4 => 3.4.4 
      @tarojs/components: 3.4.4 => 3.4.4 
      @tarojs/mini-runner: 3.4.4 => 3.4.4 
      @tarojs/plugin-framework-react: 3.4.4 => 3.4.4 
      @tarojs/react: 3.4.4 => 3.4.4 
      @tarojs/runtime: 3.4.4 => 3.4.4 
      @tarojs/taro: 3.4.4 => 3.4.4 
      @tarojs/webpack-runner: 3.4.4 => 3.4.4 
      babel-preset-taro: 3.4.4 => 3.4.4 
      eslint-config-taro: 3.4.4 => 3.4.4 
      react: ^17.0.0 => 17.0.2 
      taro-ui: ^3.1.0-beta.2 => 3.1.0-beta.2

贡献者指南

技术栈
reacttypescripthtmlcss
领域
frontendbuild system
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Basic understanding of Taro compilationKnowledge of WeChat mini program event system
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60
研究方向
The issue reports that when using linaria CSS in JS with a View component and setting catchMove={true}, the compiled output is bindtouchmove instead of catchtouchmove. The fix likely lies in Taro's compilation logic that transforms event props for mini programs. Investigate the babel plugin or transformer that processes JSX attributes, particularly in the WeChat mini program target. Relevant files may be found in packages like @tarojs/transformer or @tarojs/mini runner. Focus on the prop mapping for catchMove and determine where it is incorrectly mapped to bindtouchmove. Consider whether the issue is specific to using styled components or CSS in JS libraries that wrap components, potentially altering prop handling.