jd-opensource / jd-opensource/taro-ui

h5开发,SwipeAction组件滑块关闭复位失败

Open
#1,218 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**

taro-ui h5开发,SwipeAction组件滑块关闭复位失败。
**复现步骤**

```js
// 这里可以贴代码
```

**期望行为**

**报错信息**

![image](https://user-images.githubusercontent.com/32665907/95933913-35301880-0e02-11eb-8846-109e371556c1.png)
![image](https://user-images.githubusercontent.com/32665907/95933965-52fd7d80-0e02-11eb-84bc-72af1b313ad3.png)
**系统信息**

**补充信息**

SwipeAction 组件render函数代码,其中`transformStyle`变量在组件关闭时会成被赋值`{}`,但是并没有覆盖掉组件打开时style。
`reactify-wc.js`
临时解决:
```js
const transformStyle = transform ? { transform } : { };
```
变更为
```js
const transformStyle = transform ? { transform } : { transform: "" };
```
SwipeAction 组件render函数代码
```js
render() {
const { offsetSize, componentId, _isOpened } = this.state;
const { options } = this.props;
const rootClass = classNames('at-swipe-action', this.props.className);
const transform = this.computeTransform(offsetSize);
const transformStyle = transform ? { transform } : { };
return (React.createElement(View, { id: `swipeAction-${componentId}`, className: rootClass, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onTouchStart: this.handleTouchStart },
React.createElement(View, { className: classNames('at-swipe-action__content', {
animtion: !this.isTouching
}), style: transformStyle }, this.props.children),
Array.isArray(options) && options.length > 0 ? (React.createElement(AtSwipeActionOptions, { options: options, componentId: componentId, onQueryedDom: this.handleDomInfo }, options.map((item, key) => (React.createElement(View, { key: `${item.text}-${key}`, style: item.style, onClick: (e) => this.handleClick(item, key, e), className: classNames('at-swipe-action__option', item.className) },
React.createElement(Text, { className: 'option__text' }, item.text)))))) : null));
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.