kraken icon indicating copy to clipboard operation
kraken copied to clipboard

rax-slider 不支持手势滑动切换前后页

Open temper357 opened this issue 2 years ago • 4 comments

运行 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 });

temper357 avatar Apr 20 '22 11:04 temper357

binding 侧实现有问题,Array.prototype.slice.call(e.changedTouches) 转化到 Array 异常。

answershuto avatar Apr 24 '22 06:04 answershuto

@answershuto 请问这个问题后续还解决么?

yangtianrui95 avatar Sep 02 '22 12:09 yangtianrui95

可以到 https://github.com/openwebf/webf 咨询一下 @andycall 或者自行提个 pr,问题原因已经查到了,修复一下 binding 的实现即可。

answershuto avatar Sep 05 '22 02:09 answershuto

@answershuto 还有个问题顺便问下,现在webf和北海的关系是什么? 后面BUG就不在北海上修复了么?

yangtianrui95 avatar Sep 15 '22 06:09 yangtianrui95