taro之Swiper的使用

图样:

往往我们需要轮播图去显示我们想要的图片之类的

 这是工作的代码

<View className='top-title'><SwiperclassName='banner-swiper'interval={3000}circularautoplay>{homeBannerList.map((item) => {return (<SwiperItem key={item.id}><View className='banner-img-view'><Image className='banner-img' src={item.imgSrc} />{item.id === 1 ? null : <View className='navigation-title'>数字化综合服务平台</View>}</View></SwiperItem>)})}</Swiper></View>

我们可以看到使用的属性

interval

切换时间,其实就是大白话,多长时间滚动下一张

circular

circular  默认值为false,你会发现当我们拉到最后一张图片的时候,图片会自动轮播到第一张图片来。

autoplay 

是否自动切换  

indicatorDots 

是否显示面板指示点

 indicatorColor

 指示点颜色

 indicatorActiveColor

当前选中的指示点颜色

 duration

滑动动画时长 

 current

 当前所在滑块的 index

onChange 

current 改变时会触发 change 事件 

 vertical

滑动方向是否为纵向

 onAnimationfinish

动画结束时会触发 animationfinish 事件

附:

 

中间的新闻就是轮播效果

直接上代码

<View className='notice-content-view'><View className='trumpet-img-view'><Image className='trumpet-img' src={require('@/src/assets/home/trumpet.png')} /></View><SwiperclassName='notice-swiper'interval={10000}circularautoplay>{noticeList.map((item) => {return (<SwiperItem key={item.id} onClick={this.clickNoticeMore.bind(this, item)}><View className='common-title-view notice-text'>{item.noticeTitle}</View></SwiperItem>)})}</Swiper><View className='right-view'><AtIcon className='chevron-right-view' value='chevron-right' size='16' color='#ccc'></AtIcon></View></View>

 

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

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

相关文章

apisix创建https

总结了下apisix 使用https 的问题和方法 1、apisix 默认https 端口是9443 2、apisix 需要上传证书后才可以使用https 否二curl测试会报错 SSL routines:CONNECT_CR_SRVR_HELLO 3、apisix 上传证书方法 我是使用的自签名证书&#xff0c;注意自签名证书的Common Name 要写你…

HCIP —— 生成树 (下)

目录 STP&#xff08;生成树&#xff09;的角色选举 根网桥 根端口 选举规则&#xff1a; 指定端口 生成树的端口状态 STP的接口状态&#xff1a;禁用、阻塞、侦听、学习、转发 五种状态 禁用状态 阻塞状态 侦听状态 学习状态 转发状态 当生成树拓扑结构发生变化 …

一文6000字从0到1使用Locust做性能测试【建议收藏】

01、Locust介绍 Locust 一个开源性能测试工具&#xff0c;使用Python代码来定义用户行为&#xff0c;用它可以模拟百万计的并发用户访问你的系统。 性能工具对比&#xff1a; LoadRunner 是非常有名的商业性能测试工具&#xff0c;功能非常强大。使用也比较复杂&#xff0c;目…

【漏洞复现】科立讯通信指挥调度平台editemedia.php sql注入漏洞

漏洞描述 在20240318之前的福建科立讯通信指挥调度平台中发现了一个漏洞。该漏洞被归类为关键级别,影响文件/api/client/editemedia.php的未知部分。通过操纵参数number/enterprise_uuid可导致SQL注入。攻击可能会远程发起。 免责声明 技术文章仅供参考,任何个人和组织使…

电工职业培训初级到高级,电工技术与试题资料大全

一、资料描述 本套电工全套资料&#xff0c;大小1.70G&#xff0c;共有178个文件&#xff0c;PDF文件为主。 二、资料目录 01-电工技术基础知识大全 02-电工基础知识 03-电工技术 04-电工操作技术 05-电工识图 06-电工口诀 07-电工手册 08-PLC的应用 09-电工电子电气…

用eclipse创建Web项目,通过Servlet实现Web访问的功能。

要使用Eclipse和Tomcat 10创建一个简单的Web项目&#xff0c;并通过Servlet实现Web访问功能&#xff0c;你需要遵循以下详细步骤&#xff1a; 1. 安装和配置Eclipse和Tomcat 10 确保你已经安装了Eclipse IDE for Java EE Developers和Tomcat 10。如果还没有安装&#xff0c;请…

【VALL-E-01】环境搭建

本系列文章系本人知乎账号迁移 本文系个人知乎专栏文章迁移 VALL-E 网络是GPT-SOVITS很重要的参考 知乎专栏地址&#xff1a; 语音生成专栏 相关文章链接&#xff1a; 【VALL-E-01】环境搭建 【VALL-E-02】核心原理 1、环境包使用 从效果看没有GPT-SOVITS 来的好 环境安装…

python + tensorflow 开局托儿所自动点击脚本

python开局托儿所自动点击脚本 屏幕截图图片数字识别消除算法自动点击 屏幕截图 python 屏幕截图可以使用pyautogui或者PIL。我使用的是PIL中的ImageGrab(要授权)。 image ImageGrab.grab(bbox(0, 0, tool.static_window_width, tool.static_window_height)) image np.arra…

后端如何返回404地址

当我们网站输入不存在的地址&#xff0c;经常会出现404的页面&#xff0c;这是如何做到的 1.添加配置 spring:mvc:view:prefix: /templates/suffix: .html 2.resources下添加templates目录&#xff0c;下面放404的网站 3.添加依赖&#xff0c;版本在主pom里面配置好了&#x…

springboot项目学习-瑞吉外卖(3)

1.任务 实现分类管理功能数据的添加实现分类管理数据的分页查询实现分类管理数据的删除 由于前两个业务和之前的业务基本一致&#xff0c;所以这里就不重点介绍了&#xff0c;只放代码 2.分类管理功能数据的添加 前提&#xff1a;导入category实体类 2.1.CategoryMapper接口 //…

海外基金牌照的优势及注意事项-华媒舍

一、了解海外基金牌照 在投资领域&#xff0c;海外基金牌照是指投资者可以通过获得海外金融监管机构颁发的许可证&#xff0c;参与海外基金投资。拥有海外基金牌照的投资者可以享受更广泛的投资机会&#xff0c;包括跨境投资、全球资产配置等。 二、海外基金牌照的优势 多元化…

【HarmonyOS】ArkUI - 页面路由

一、概念 页面路由是指在应用程序中实现不同页面之间的跳转和数据传递。 案例&#xff1a;第一次使用某个购物应用&#xff0c;打开时肯定会是一个登录页&#xff0c;在登录成功以后&#xff0c;会跳转到首页&#xff0c;然后可能会去搜索&#xff0c;就会进入到搜索列表页&am…

水下蓝牙耳机哪个好?必看4款购买单,拒绝踩雷!

在当今的科技时代&#xff0c;无线蓝牙耳机已经成为了我们生活中不可或缺的一部分。无论是运动、工作还是休闲娱乐&#xff0c;一款好的蓝牙耳机都能为我们带来极大的便利和乐趣。然而&#xff0c;在水下使用蓝牙耳机却是一个相对特殊的应用场景&#xff0c;需要考虑到防水、防…

力扣刷题Days25-45. 跳跃游戏 II(js)

目录 1&#xff0c;题目 2&#xff0c;代码 贪心算法正向查找 3&#xff0c;学习 解题思路 具体代码处理 数组遍历的最后边界的处理&#xff1a; 1&#xff0c;题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向…

Nuclei Poc开发

1、Poc开发工具介绍 Nuclei&#xff1a;https://nuclei.projectdiscovery.io/ Cloud Platfrom云平台&#xff1a;https://cloud.projectdiscovery.io/ 2、目标站点简介 目标演示站点&#xff1a;http://glkb-jqe1.aqlab.cn/nacos/#/login 指纹&#xff1a;Nacos 已知常用漏洞…

基于springboot+vue的农产品直卖平台

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

牛客竞赛语法入门班顺序结构习题(重现赛)(1031-1040)

本篇包含&#xff1a; 1、1031-时间转换 2、1032-温度转换 3、1033-计算机内存 4、1034-[NOIP2017]成绩 5、1035-KiKi的最高分 6、1036-组队比赛 7、1037-平方根 8、1038-长方体 9、1039-使徒袭来 10、1040-白兔的分身术 本篇包含考点&#xff1a; 1、小时、分钟和秒的转换 2、…

备战蓝桥杯Day35 - 动态规划 - 01背包问题

问题描述 隐含前提&#xff1a; 1.物体是不可分的&#xff0c;要么装&#xff0c;要么不装&#xff0c;不能只装一部分。 2.物体顶多使用一次。 动态规划思路 我在b站上看的闫氏dp分析大法的视频&#xff0c;他对dp问题做了总结归纳。 从集合的角度分析dp问题。求出有限集…

一款炫酷的python形状绘制动画库

这个库让复杂数学概念的可视化变得既简单又有趣&#xff0c;无论是线性代数、微积分&#xff0c;还是更高级的数学主题&#xff0c;Manim都能让它们栩栩如生&#xff0c;特别适合于制作数学视频和演示文稿。 特点 动画生成&#xff1a; Manim库提供了一套丰富的工具和方法&…

Install Docker

Docker Desktop 直接安装 Docker Desktop Docker Desktop includes the Docker daemon (dockerd), the Docker client (docker), Docker Compose, Docker Content Trust, Kubernetes, and Credential Helper. Linux下安装Docker CE 参考官方文档 参见阿里云的文档 # step 1…