kraken
kraken copied to clipboard
rax-slider 不支持手势滑动切换前后页
运行 https://rax.alibaba-inc.com/docs/components/slider 中的 demo,发现无法通过手势来切换前后页。
重现代码 | Code example:
import { createElement, Component, render, createRef } from 'rax';
import View from 'rax-view';
import Image from 'rax-image';
import Slider from 'rax-slider';
import DriverUniversal from 'driver-universal';
class App extends Component {
constructor(props) {
super(props);
this.inputRef = createRef();
}
onchange = (index) => {
console.log('change', index);
};
onClick = () => {
this.inputRef.current.slideTo(0);
};
render() {
return (
<View>
<Slider
className="slider"
width="750"
height="500"
style={styles.slider}
autoPlay={true}
loop={true}
showsPagination={true}
paginationStyle={styles.paginationStyle}
autoplayTimeout={3000}
onChange={this.onchange}
ref={this.inputRef}
>
<Slider.Item>
<View style={styles.itemWrap}>
<Image
style={styles.image}
source={{
height: 500,
width: 375,
uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png',
}}
/>
</View>
</Slider.Item>
<Slider.Item>
<View style={styles.itemWrap}>
<Image
style={styles.image}
source={{
height: 500,
width: 375,
uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png',
}}
/>
</View>
</Slider.Item>
<Slider.Item>
<View style={styles.itemWrap}>
<Image
style={styles.image}
source={{
height: 500,
width: 375,
uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png',
}}
/>
</View>
</Slider.Item>
</Slider>
<View onClick={this.onClick}>Click</View>
</View>
);
}
}
const styles = {
slider: {
width: 750,
position: 'relative',
overflow: 'hidden',
height: 500,
backgroundColor: '#cccccc',
},
itemWrap: {
width: 750,
height: 500,
},
image: {
width: 750,
height: 500,
},
button: {
marginTop: 20,
width: 340,
height: 80,
},
paginationStyle: {
position: 'absolute',
width: 750,
height: 40,
bottom: 20,
left: 0,
itemColor: 'rgba(255, 255, 255, 0.5)',
itemSelectedColor: 'rgb(255, 80, 0)',
itemSize: 16,
},
};
render(<App />, document.body, { driver: DriverUniversal });
binding 侧实现有问题,Array.prototype.slice.call(e.changedTouches) 转化到 Array 异常。
@answershuto 请问这个问题后续还解决么?
可以到 https://github.com/openwebf/webf 咨询一下 @andycall 或者自行提个 pr,问题原因已经查到了,修复一下 binding 的实现即可。
@answershuto 还有个问题顺便问下,现在webf和北海的关系是什么? 后面BUG就不在北海上修复了么?