taro Swiper组件--异形滚动

news2024/11/15 1:52:02

效果
在这里插入图片描述

<Swiper
  indicatorDots={false}
  previousMargin='50px'
  nextMargin='50px'
  autoplay={false}
  interval='100'
  onChange={onChangeSwiper}
>
  {
    [1,2,3].map((item, index) => {
      return (
        <SwiperItem
          key={`item-${index}`}
        >
          <View className={`demo-item ${currentIndex=== index ? 'active' : ''}`}>
            { item }
          </View>
        </SwiperItem>
      )
    })
  }
</Swiper>
const [ currentIndex, setCurrentIndex ] = useState(0)
const onChangeSwiper = (e) => {
  const idx = e.detail.current
  setCurrentIndex(idx)
}
.demo-item {
  height: 272px;
  color: #fff;
  background: #000;
  border-radius: 39px;
  text-align: center;
  transform: scale(.9);
  transition: all ease .4s;
  &.active {
    transform: scale(1);
  }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PCL-6】PCL基于凹凸型的分割算法(LCCP)

凹凸型分割算法适用于颜色类似、棱角分明的物体场景分割。LCCP方法不依赖点云颜色&#xff0c;只使用空间信息和法线信息。 算法流程&#xff1a; 1、基于超体聚类的过分割&#xff1b; 2、在超体聚类的基础上再聚类。 算法思路&#xff1a; 1、基于CC和SC判断凹凸性&…

24.Netty源码之合理管理堆内存

highlight: arduino-light 合理管理 Netty 堆外内存 内存使用目标 •内存占用少(空间) •应用速度快(时间) 即多快好省 对 Java 而言&#xff1a;减少 Full GC 的 STW(Stop the world)时间 内存使用技巧 • 减少对象本身大小 md 例 1&#xff1a;用基本类型就不要用包装类。 例…

程序使用Microsoft.XMLHTTP对象请求https时出错解决

程序中使用Microsoft.XMLHTTP组件请求https时出现如下错误&#xff1a; 出错程序代码示例&#xff1a; strUrl "https://www.xxx.com/xxx.asp?id11" dim objXmlHttp set objXmlHttp Server.CreateObject("Microsoft.XMLHTTP") objXmlHttp.open "…

关于架构与架构师的一些感悟

本博客地址&#xff1a;https://security.blog.csdn.net/article/details/132152177 一、引子 最近在做工作总结的过程中&#xff0c;对于架构与架构师又有了一些新的感悟&#xff0c;本文有感而写&#xff0c;分为四个部分&#xff1a; ● 关于系统架构 ● 关于系统架构师 …

动手学深度学习(三)线性神经网络—softmax回归

分类任务是对离散变量预测&#xff0c;通过比较分类的概率来判断预测的结果。 softmax回归和线性回归一样也是将输入特征与权重做线性叠加&#xff0c;但是softmax回归的输出值个数等于标签中的类别数&#xff0c;这样就可以用于预测分类问题。 分类问题和线性回归的区别&#…

《24海南大学835软件工程考研经验贴》

1.经验之谈 首先&#xff0c;我是一个二战的考生&#xff0c;一战给我带来的经验有几点。第一&#xff0c;数学、专业课这两门越早复习越好&#xff0c;越拖到后面你就会发现来不及了&#xff0c;这学不完&#xff0c;那学不完的。第二、我认为是比较关键的一点&#xff0c;一定…

WebRTC基础知识

文章目录 基础概念NAT (Network Address Translation) 打洞STUN&#xff08;Session Traversal Utilities for NAT&#xff09;基于STUN协议的DDoS反射攻击 # TODO TURN&#xff08;Traversal Using Relays around NAT&#xff09;ICE&#xff08;Interactive Connectivity Est…

Java版企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis tbms

​ 功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查…

[C#] 简单的俄罗斯方块实现

一个控制台俄罗斯方块游戏的简单实现. 已在 github.com/SlimeNull/Tetris 开源. 思路 很简单, 一个二维数组存储当前游戏的方块地图, 用 bool 即可, true 表示当前块被填充, false 表示没有. 然后, 抽一个 “形状” 类, 形状表示当前玩家正在操作的一个形状, 例如方块, 直线…

力扣 474. 一和零

题目来源&#xff1a;https://leetcode.cn/problems/ones-and-zeroes/description/ C题解&#xff1a;本题其实是01背包问题&#xff01;只不过这个背包有两个维度&#xff0c;一个是m 一个是n&#xff0c;而不同长度的字符串就是不同大小的待装物品。动规五部曲&#xff1a; …

Java并发 | 常见线程安全容器

文章目录 简介一、Hash表&#x1f6a3;1、ConcurrentHashMap1.1 内部实现原理1.2 并发操作方法1.3 ConcurrentHashMap与Hashtable的比较 二、集合&#x1f6a3;2、CopyOnWriteArrayList2.1 内部实现原理2.2 Copy-On-Write(COW)设计思想2.3 实操 三、Map&#x1f6a3;3、Concurr…

C语言第十课----------------扫雷----------数组的经典练手题

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; &#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382;…

力扣120.三角形最小路径和(动态规划)

/*** author Limg* date 2022/08/09* 给定一个三角形 triangle &#xff0c;找出自顶向下的最小路径和。* 每一步只能移动到下一行中相邻的结点上。* 相邻的结点在这里指的是下标与上一层结点下标相同或者等于上一层结点下标 1 的两个结点。* 也就是说&#xff0c;如果正位于当…

(MVC)SpringBoot+Mybatis+Mapper.xml

前言&#xff1a;本篇博客主要对MVC架构、Mybatis工程加深下理解&#xff0c;前面写过一篇博客&#xff1a;SprintBoothtml/css/jsmybatis的demo&#xff0c;里面涉及到了Mybatis的应用&#xff0c;此篇博客主要介绍一种将sql语句写到了配置文件里的方法&#xff0c;即Mybatis里…

AVL树(二叉搜索树)

AVL树 1.1 AVL树的概念1.2 AVL树节点的定义1.3 AVL树的旋转1.3.1 右旋&#xff08;右单旋&#xff09;1.3.2 左旋&#xff08;左单旋&#xff09;1.3.3 左右双旋&#xff08;先左单旋再右单旋&#xff09;1.3.4 右左双旋&#xff08;先右单旋再左单旋&#xff09; 1.4 AVL树的插…

进程 的初识

程序和进程有什么区别 程序是静态的概念&#xff0c;gcc xxx.c -o pro 磁盘中生成的文件&#xff0c;叫做程序。进程是程序的一次运行活动&#xff0c;通俗点的意思就是程序跑起来了&#xff0c;系统中就多了一个进程。 如何查看系统中有哪些进程 使用 ps 指令&#xff08;完整…

❤ vue组件的生命周期

❤ vue组件的生命周期 介绍 在vue组件中&#xff0c;生命周期指的是从组件创建开始&#xff0c;到组件销毁&#xff0c;所经历的整个过程&#xff1b;在这个过程中的一些不同的阶段&#xff0c;vue会调用指定的一些组件方法。基本生命周期函数有下面几个阶段&#xff1a;创建…

Python中的dataclass:简化数据类的创建

Python中的dataclass是一个装饰器&#xff0c;用于自动添加一些常见的方法&#xff0c;如构造函数、__repr__、__eq__等。它简化了创建数据类的过程&#xff0c;减少了样板代码&#xff0c;提高了代码的可读性和可维护性。有点类似java里面的Java Bean。 让我们看一个简单的例子…

将.doc文档的默认打开方式从WPS修改为word office打开方式的具体方法(以win 10 操作系统为例)

将.doc文档的默认打开方式从WPS修改为word office打开方式的具体方法&#xff08;以win 10 操作系统为例&#xff09; 随着近几年WPS软件的不断完善和丰富&#xff0c;在某些方面取得了具有特色的优势。在平时编辑.doc文档时候也常常用到wps软件&#xff0c;不过WPS文献也存在…

【分布式技术专题】RocketMQ延迟消息实现原理和源码分析

痛点背景 业务场景 假设有这么一个需求&#xff0c;用户下单后如果30分钟未支付&#xff0c;则该订单需要被关闭。你会怎么做&#xff1f; 之前方案 最简单的做法&#xff0c;可以服务端启动个定时器&#xff0c;隔个几秒扫描数据库中待支付的订单&#xff0c;如果(当前时间-订…