MMSwiper 轮播图

Props

IMmSwiperProps

属性	类型	默认值	必传	说明
current	number	0	否	当前所在滑块的
data	T[]		是	数据源
indicator	boolean	true	否	自定义显示器
className	string		否	类
forceWidth	number		否	强行指定设计稿宽度

ISwiperIndicatorProps

属性	类型	默认值	必传	说明
indicatorOffset	number	5px	否	指示器距底部位置
indicatorColor	string		否	指示器颜色
indicatorActiveColor	string		否	指示器激活颜色
indicatorStyle	Pick<CSSProperties, 'width' | 'height' | 'borderRadius' | 'opacity'>		否	指示器样式
indicatorActiveStyle	Pick<CSSProperties, 'width' | 'height' | 'borderRadius' | 'opacity'>		否	指示器激活样式

代码示例

import { FC, memo, useEffect, useState } from "react";
import { View, Text } from "@tarojs/components";
import MMNavigation from "../../components/navigation/index";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMSwiper from "../../components/swiper";
import { IMmSwiperProps } from "../../components/swiper/const";
import MMCheckbox from "../../components/checkbox";
import MMSpace from "../../components/space";

/**
 * 滑动单元格
 *
 * @description 可以左右滑动来展示操作按钮的单元格组件。
 * @param {*} props
 * @return {*}
 */
const Component: FC<{}> = (props) => {
  const [current, setCurrent] = useState(0);
  const [data, setData] = useState([
    "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
    "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
    "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
  ]);

  const [swiperProps, setSwiperProps] = useState<
    Partial<IMmSwiperProps<string>>
  >({
    circular: false,
    autoplay: false,
    interval: 3000,
  });

  useEffect(() => {
    console.log(current, "current");
  }, [current]);

  return (
    <View>
      <MMNavigation title="MMSwipeCell" />

      <PageDemoBlock title="基础使用">
        <View>
          <Text>向左边滑动</Text>
        </View>
      </PageDemoBlock>

      <MMSwiper
        {...swiperProps}
        data={data}
        style={{ height: 160 }}
        onChange={(ev) => {
          setCurrent(ev.detail.current);
        }}
      />

      <PageDemoBlock title="设置">
        <MMSpace direction="column">
          <MMCheckbox
            value={swiperProps.circular}
            onChange={(ev) => {
              setSwiperProps((pre) => ({ ...pre, circular: ev }));
            }}
          >
            首尾衔接
          </MMCheckbox>
          <MMCheckbox
            value={swiperProps.autoplay}
            onChange={(ev) => {
              setSwiperProps((pre) => ({ ...pre, autoplay: ev }));
            }}
          >
            自动播放
          </MMCheckbox>
        </MMSpace>
      </PageDemoBlock>
    </View>
  );
};

const MMSwiperPage = memo(Component);
export default MMSwiperPage;