智能小程序 Ray 开发实践——视图容器组件 Swiper 介绍

Swiper

幻灯片、轮播容器，使用时必须指定整体高度。

导入

import { Swiper } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
autoplay	boolean	false	是否自动切换	涂鸦、微信
circular	boolean	false	是否采用衔接滑动	涂鸦、微信
current	number	0	当前所在滑块的 index	涂鸦、微信
dotActiveColor	string	#666666	当前选中的指示点颜色	涂鸦、微信
dotColor	string	#333333	指示点颜色	涂鸦、微信
dots	boolean	false	是否显示面板指示点	涂鸦、微信
duration	number	500	滑动动画时长	涂鸦、微信
interval	number	5000	自动切换时间间隔	涂鸦、微信
vertical	boolean	false	滑动方向是否为纵向	涂鸦、微信
dataSource	P[]		数据源	涂鸦、微信
renderItem	func(P)		渲染数据成员	涂鸦、微信
onChange	func(event)		current 改变时, event.detail = {current, source}	涂鸦、微信
onAfterChange	func(event)		动画结束时触发，event.detail 同上	涂鸦、微信

示例代码

• index.module.less

.swiper {
  width: 702rpx;
  height: 200rpx;
}
.swiperItem {
  width: 702rpx;
  height: 200rpx;
  display: block;
}
.nested {
  width: 702rpx;
  height: 400rpx;
}
.nestedItem {
  width: 702rpx;
  height: 400rpx;
}
.nestedSwiper {
  width: 702rpx;
  height: 200rpx;
}

基本用法

import React from 'react';
 
import { Button, View, Swiper } from '@ray-js/components';
 
import styles from './index.module.less';
 
function randomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
 
export default function Demo() {
  const [current, setCurrent] = React.useState(0);
 
  const getRandomCurrent = React.useCallback(() => {
    let newCurrent = (current + Math.ceil(Math.random() * 3)) % 3;
    while (newCurrent === current) {
      newCurrent = (current + Math.ceil(Math.random() * 3)) % 3;
    }
    return newCurrent;
  }, [current]);
 
  return (
    <React.Fragment>
      <Swiper
        current={current}
        dots
        className={styles.swiper}
        dataSource={[randomColor(), randomColor(), randomColor()]}
        renderItem={(color: string) => {
          return (
            <View
              className={styles.swiperItem}
              style={{ backgroundColor: color }}
            />
          );
        }}
        onChange={(event) => {
          const { current } = event;
          setCurrent(current);
        }}
      />
      <Button
        onClick={() => {
          const nc = getRandomCurrent();
          setCurrent(nc);
          console.log({ title: '切换到第 ' + nc + ' 个元素', icon: 'none' });
        }}
      >
        手动切换
      </Button>
    </React.Fragment>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。