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

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

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

    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 = autoplay => !!autoplay;
    const loop = loop => !!loop;
    const muted = muted => !!muted;
    const showPlayBtn = showPlayBtn => !!showPlayBtn;
    const controls = controls => !!controls;
    const title = title => title;
    const poster = poster => poster;
    const list = props.list || [];
    const [cur, setCur] = 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={`${dotClassName(props.dot)} ${swiperTypeClassName(props.type)}`} circular={circular} indicatorDots={indicatorDots} indicatorColor={indicatorColor} indicatorActiveColor={indicatorActiveColor} interval={interval} duration={duration} onChange={onChange}>
      {list.map((item, index) => <SwiperItem key={index} onClick={() => {
        onClick(index);
      }}>
          {item.type === 'image' ? renderImg(item) : ''}
          {item.type === 'video' ? renderVideo(item) : ''}
        </SwiperItem>)}
    </Swiper>;
    const cardComponent = <Swiper className={`${dotClassName(props.dot)} ${swiperTypeClassName(props.type)}`} circular={circular} indicatorDots={indicatorDots} indicatorColor={indicatorColor} indicatorActiveColor={indicatorActiveColor} interval={interval} duration={duration} onChange={onChange}>
      {list.map((item, index) => <SwiperItem 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
};