mp-colorui/dist/h5/components/swiper/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { Image, Swiper, SwiperItem, Video, View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames, generateId, isAliPay, screenPercent } from "../../lib/index";
import "./index.scss";
export default class ClSwiper extends Taro.Component {
  render() {
    const props = this.props;

    const [listState, setListState] = Taro.useState(props.list || []);
    Taro.useEffect(() => {
      const list = props.list || [];
      setListState(list.map(item => {
        item.cu_swiper_id = generateId();
        return item;
      }));
    }, [props.list]);
    const swiperTypeClassName = type => type ? `${type}-swiper` : "screen-swiper";
    const dotClassName = type => type === "round" ? `${type}-dot` : "square-dot";
    const duration = props.duration || 500;
    const interval = props.interval || 5000;
    const indicatorDots = !!props.indicatorDots;
    const indicatorColor = props.indicatorColor || "#000";
    const indicatorActiveColor = props.indicatorActiveColor || "#FFF";
    const circular = !!props.circular;
    const autoplay = autoplayData => !!autoplayData;
    const loop = loopData => !!loopData;
    const muted = mutedData => !!mutedData;
    const showPlayBtn = showPlayBtnData => !!showPlayBtnData;
    const controls = controlsData => !!controlsData;
    const title = titleData => titleData;
    const poster = posterData => posterData;
    const list = listState || [];
    const autoplaySwiper = props.autoplay;
    const [cur, setCur] = Taro.useState(0);
    const onChange = e => {
      const current = e.detail.current;
      setCur(current);
      props.onChange && props.onChange(current);
    };
    const onClick = index => {
      props.onClick && props.onClick(index);
    };
    // const onTouchMove = e => {}
    // const onTouchStart = e => {}
    // const onTouchEnd = e => {}
    const renderImg = item => <Image src={item.url || ""} mode="aspectFill" />;
    const renderVideo = item => <Video src={item.url || ""} autoplay={autoplay(item.autoplay)} loop={loop(item.loop)} muted={muted(item.muted)} showPlayBtn={showPlayBtn(item.showPlayBtn)} controls={controls(item.controls)} objectFit="cover" title={title(item.title)} poster={poster(item.poster)} />;
    const screenComponent = <Swiper className={classNames(`${dotClassName(props.dot)} ${swiperTypeClassName(props.type)}`, props.className)} style={Object.assign({}, props.style)} circular={circular} indicatorDots={indicatorDots} indicatorColor={indicatorColor} indicatorActiveColor={indicatorActiveColor} interval={interval} duration={duration} onChange={onChange} autoplay={autoplaySwiper}>
      {list.map((item, index) => <SwiperItem key={"key-" + index} onClick={() => {
        onClick(index);
      }}>
          {item.type !== "video" ? renderImg(item) : ""}
          {item.type === "video" ? renderVideo(item) : ""}
        </SwiperItem>)}
    </Swiper>;
    const cardComponent = <Swiper className={classNames(`${dotClassName(props.dot)} ${swiperTypeClassName(props.type)}`, props.className)} style={Object.assign({}, props.style)} circular={circular} indicatorDots={indicatorDots} indicatorColor={indicatorColor} indicatorActiveColor={indicatorActiveColor} interval={interval} duration={duration} onChange={onChange} autoplay={autoplaySwiper} nextMargin={Taro.pxTransform(isAliPay ? 70 * screenPercent : 70)} previousMargin={Taro.pxTransform(isAliPay ? 70 * screenPercent : 70)}>
      {list.map((item, index) => <SwiperItem key={"key-" + index} className={`${cur === index ? "cur" : ""}`} onClick={() => {
        onClick(index);
      }}>
          <View className="swiper-item">
            {item.type === "image" ? renderImg(item) : ""}
            {item.type === "video" ? renderVideo(item) : ""}
          </View>
        </SwiperItem>)}
    </Swiper>;
    // const towerComponent = (
    //   <View className={swiperTypeClassName(props.type)} onTouchMove={onTouchMove} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
    //     <View className={`tower-item ${}`}></View>
    //   </View>
    // );
    return props.type === "card" ? cardComponent : screenComponent;
  }

}
ClSwiper.options = {
  addGlobalClass: true
};
ClSwiper.defaultProps = {
  autoplay: false,
  type: "screen",
  list: [],
  dot: "square",
  duration: 500,
  onClick: () => {},
  indicatorDots: false,
  indicatorColor: "#000",
  indicatorActiveColor: "#FFF",
  interval: 5000,
  circular: false,
  onChange: () => {}
};