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

最新推荐文章于 2024-07-02 22:29:44 发布

IoT砖家涂拉拉

最新推荐文章于 2024-07-02 22:29:44 发布

阅读量175

点赞数 2

文章标签： javascript 前端开发语言小程序 App 物联网 API

本文链接：https://blog.csdn.net/Ms_Smart/article/details/137967610

版权

本文介绍了如何在React应用中使用Ray-js库的Swiper和SwiperItem组件创建可自定义颜色的滑动视图，并展示了基本的配置和样式设置。

摘要由CSDN通过智能技术生成

SwiperItem

滑块视图容器子项，仅可放置在 swiper 组件中，宽高自动设置为 100%。

导入

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

示例代码

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, { useState } from 'react';
 
import { View, Swiper, SwiperItem } 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] = useState(1);
  return (
    <Swiper
      className={styles.swiper}
      autoplay
      interval={2500}
      dots={true}
      current={current}
      onChange={(event) => {
        const { current } = event;
        setCurrent(current);
      }}
      onAfterChange={(event) => {
        // console.log('onAfterChange', event);
      }}
    >
      {[randomColor(), randomColor(), randomColor()].map((item, index) => {
        return (
          <SwiperItem key={index}>
            <View
              className={styles.swiperItem}
              style={{ backgroundColor: item }}
            />
          </SwiperItem>
        );
      })}
    </Swiper>
  );
}

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