swiper使用方法?

组件 首先 recat -vant组件

带小点点的 可以实现跳转的一个效果

import { Swiper } from 'react-vant';

 每个 Swiper.Item 代表一张轮播卡片,可以通过 autoplay 属性设置自动轮播的间隔。

import React from 'react';
import { Swiper } from 'react-vant';
import { items } from './demo/items';
import './demo/base.less';export default () => {return (<div className="demo-swiper"><Swiper autoplay={5000}>{items}</Swiper></div>);
};

这里的 swiper 标签上 5000  是间隔时间

import React from 'react'
import { Swiper, Toast } from 'react-vant'const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']export const items = colors.map((color, index) => (<Swiper.Item key={color}><divonClick={() => {Toast.info(`你点击了卡片 ${index + 1}`)}}>{index + 1}</div></Swiper.Item>
))

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/315956.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot+layuimini实现左侧菜单动态展示

layuimini左侧菜单动态显示 首先我们看一下layuimini的原有菜单显示格式 {"homeInfo": {"title": "首页","href": "page/welcome-2.html?t2"},"logoInfo": {"title": "LAYUI MINI","…

软件工程物联网方向嵌入式系统复习笔记--嵌入式系统硬件平台

2 嵌入式系统硬件平台 2.1 嵌入式系统硬件平台概述 2.1.1 整体构架 台式计算机硬件平台整体构架 嵌入式系统硬件平台整体构架 作业&#xff1a;看门狗和实时时钟是什么&#xff1f; 看门狗&#xff08;Watchdog&#xff09; 我的理解&#xff1a; 概念&#xff1a;看门狗实…

阿斯达年代记三强争霸服务器没反应 安装中发生错误的解决方法

阿斯达年代记三强争霸服务器没反应 安装中发生错误的解决方法 最近刚上线的由影视剧改编的游戏《阿斯达年代记三强争霸》可谓是在游戏圈内引起了轩然大波&#xff0c;这是一款由网石集团与龙工作室联合开发的MMORPG游戏&#xff0c;游戏背景设定在一个名为阿斯大陆的区域&…

Qt 6 开源版(免费) -- 安装图解

Qt6起&#xff0c;两项重大改变&#xff08;并非指技术&#xff09;&#xff1a; 必须在线安装&#xff0c;不再提供单独的安装包主推收费的商业版 当然的&#xff0c;为了引流、培养市场&#xff0c;提供了一个免费的开源版本。 开源版相对于收费的商业版&#xff0c;主体是…

Spark RDD的分区与依赖关系

Spark RDD的分区与依赖关系 RDD分区 RDD&#xff0c;Resiliennt Distributed Datasets&#xff0c;弹性式分布式数据集&#xff0c;是由若干个分区构成的&#xff0c;那么这每一个分区中的数据又是如何产生的呢&#xff1f;这就是RDD分区策略所要解决的问题&#xff0c;下面我…

C语言基础:初识指针(二)

当你不知道指针变量初始化什么时&#xff0c;可以初始化为空指针 int *pNULL; 我们看NULL的定义&#xff0c;可以看出NULL是0被强制转化为Void* 类型的0&#xff1b;实质还是个0&#xff1b; 如何避免野指针&#xff1a; 1. 指针初始化 2. 小心指针越界 3. 指针指向空间…

springboot笔记一:idea社区版本创建springboot项目的方式

社区idea 手动maven 创建springboot项目 创建之后修改pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

苹果发布开源模型;盘古大模型5.0将亮相;英伟达将收购 Run:ai

苹果首次发布开源语言模型 近期&#xff0c;苹果在 Hugging Face 发布了 OpenELM 系列模型。OpenELM 的关键创新是逐层扩展策略&#xff0c;该策略可在 transformer 模型的每一层中有效地分配参数&#xff0c;从而提高准确性。 与具有统一参数分配的传统语言模型不同&#xff…

elasticsearch-8.1.0安装记录

目录 零、版本说明一、安装二、使用客户端访问 零、版本说明 centos [rootnode1 ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core)elasticsearch elasticsearch-8.1.0-linux-x86_64一、安装 systemctl stop firewalld.servicesystemctl disable firewal…

ubuntu开启message文件

环境&#xff1a;ubuntu 20.04 1、首先需要修改 /etc/rsyslog.d/50-default.conf 文件&#xff1b;源文件中message被注释&#xff0c;如下图&#xff1a; 2、打开注释&#xff1a; 3、重启服务 systemctl restart rsyslog.service 如此即可&#xff01;

element -ui 横向时间轴,时间轴悬浮对应日期

效果&#xff1a; <el-tabs v-model"activeName" type"card" tab-click"handleClick"><el-tab-pane label"周期性巡视" name"zqxxs" key"zqxxs" class"scrollable-tab-pane"><div v-if…

Spring Kafka—— KafkaListenerEndpointRegistry 隐式注册分析

由于我想在项目中实现基于 Spring kafka 动态连接 Kafka 服务&#xff0c;指定监听 Topic 并控制消费程序的启动和停止这样一个功能&#xff0c;所以就大概的了解了一下 Spring Kafka 的几个重要的类的概念&#xff0c;内容如下&#xff1a; ConsumerFactory 作用&#xff1a;…

【Linux】信号的产生

目录 一. 信号的概念signal() 函数 二. 信号的产生1. 键盘发送2. 系统调用kill()raise()abort() 3. 软件条件alarm() 4. 硬件异常除零错误:野指针: 三. 核心转储 一. 信号的概念 信号是消息的载体, 标志着不同的行为; 是进程间发送异步信息的一种方式, 属于软中断. 信号随时都…

PNPM - nodejs 包管理

文章目录 一、关于 PNPM开发动机1、节省磁盘空间2、提升安装速度3、创建一个 non-flat node_modules 文件夹 二、安装通过 npm 安装 pnpm通过 Homebrew 安装 pnpm 三、pnpm CLI1、与 npm 的差异2、参数-C <path>, --dir <path>-w, --workspace-root 3、命令4、环境…

免费语音转文字:自建Whisper,贝锐花生壳3步远程访问

Whisper是OpenAI开发的自动语音识别系统&#xff08;语音转文字&#xff09;。 OpenAI称其英文语音辨识能力已达到人类水准&#xff0c;且支持其它98中语言的自动语音辨识&#xff0c;Whisper神经网络模型被训练来运行语音辨识与翻译任务。 此外&#xff0c;与其他需要联网运行…

Blender曲线操作

1.几种常见建模方式 -多边形建模&#xff1a;Blender&#xff0c;C4D&#xff0c;3DsMax&#xff0c;MaYa -曲线&#xff1a; -曲面&#xff1a;Rhino&#xff08;Nurbs&#xff09; -雕刻&#xff1a;Blender&#xff0c;ZBrush -蜡笔&#xff1a;Blender 1&#xff09;新…

windows11家庭版开启Hyper-v

前提&#xff1a;如果在控制面板中-->程序和功能-->启用和关闭windows功能-->没有Hyper-v 1.什么是Hyper-v&#xff1f; Hyper-v分为两个部分&#xff1a;底层的虚拟机平台、上层的虚拟机管理软件 2.Hyper-v安装 2.1新建hyper.cmd文件&#xff0c;写入下面的内容&…

物联网:从电信物联开发平台AIoT获取物联设备上报数据示例

设备接入到电信AIoT物联平台后&#xff0c;可以在平台上查询到设备上报的数据。 下面就以接入的NBIOT物联远传水表为例。 在产品中选择指定设备&#xff0c;在数据查看中可以看到此设备上报的数据。 示例中这组数据是base64位加密的&#xff0c;获取后还需要转换解密。 而我…

Linux软件包管理器——yum

文章目录 1.什么是软件包1.1安装与删除命令1.2注意事项1.3查看软件包1.3.1注意事项&#xff1a; 2.关于rzsz3.有趣的Linux下的指令 -sl 1.什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一…

操作系统安全:Windows与Linux的安全标识符,身份鉴别和访问控制

「作者简介」:2022年北京冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础对安全知识体系进行总结与归纳,著作适用于快速入门的 《网络安全自学教程》,内容涵盖系统安全、信息收集等12个知识域的一百多个知识点,持续更新。 操作系统有4个安全目标…