Basic.tsx 1.23 KB
Newer Older
周宏民's avatar
周宏民 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-02-08 16:03:42
 */
import { Button } from 'antd';
import DataCarousel from '../index';
import React from 'react';
import styles from './index.less';
function Demo() {
  const list = [
    { userId: '大邑小区', userName: '0.4Mpa' },
    { userId: '工业园一', userName: '0.4Mpa' },
    { userId: '工业园二', userName: '0.4Mpa' },
    { userId: '工业园三', userName: '0.4Mpa' },
    { userId: '工业园四', userName: '0.4Mpa' },
    { userId: '工业园五', userName: '0.4Mpa' },
    { userId: '工业园六', userName: '0.4Mpa' },
    { userId: '工业园七', userName: '0.4Mpa' },
    { userId: '工业园八', userName: '0.4Mpa' },
  ];
  const renderItem = (item) => {
    return (
      <div className={styles.list_item}>
        <span>{item.userId}</span>
        <span>{item.userName}</span>
      </div>
    );
  };
30 31 32
  const onSwiper = (swiper) => {
    console.log('🚀 ~ swiper', swiper);
  };
周宏民's avatar
周宏民 committed
33 34 35
  return (
    <div style={{ width: '100%' }}>
      <div style={{ width: '300px', height: '200px', background: 'rgba(0,0,0,0.2)' }}>
36
        <DataCarousel list={list} renderItem={renderItem} onSwiper={onSwiper}></DataCarousel>
周宏民's avatar
周宏民 committed
37 38 39 40 41 42 43
      </div>
      <br />
    </div>
  );
}

export default Demo;