当前位置: 首页 > news >正文

uniapp横屏移动端卡片缩进轮播图

uniapp横屏移动端卡片缩进轮播图

效果:
在这里插入图片描述

代码:

<!-- 简单封装轮播图组件:swiperCard -->
<template><swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="10000" :duration="500"previous-margin="70rpx" next-margin="70rpx" @change="change"><swiper-item v-for="(item, i) in 5" :key="i"><view class="swiper-item uni-bg-red" :class="i === swiperIndex ? 'active' : ''">A</view></swiper-item></swiper>
</template><script>export default {data() {return {swiperIndex: 0}},methods: {change(e) {// console.log(e.target.current);this.swiperIndex = e.target.current;}}}
</script><style lang="scss" scoped>.swiper {height: calc(100vh - 150rpx);width: 100%;.swiper-item {background-color: pink;height: calc(100vh - 200rpx);width: calc(100vw - 180rpx);border-radius: 10rpx;margin-top: 10rpx;}// 轮播图当前激活的样式.active {height: calc(100vh - 170rpx);margin-top: 0rpx;transition: all .2s ease-in 0s;}}
</style>

相关文章:

uniapp横屏移动端卡片缩进轮播图

uniapp横屏移动端卡片缩进轮播图 效果&#xff1a; 代码&#xff1a; <!-- 简单封装轮播图组件:swiperCard --> <template><swiper class"swiper" circular :indicator-dots"true" :autoplay"true" :interval"10000&quo…...

整合Spring Boot和Apache Solr进行全文搜索

整合Spring Boot和Apache Solr进行全文搜索 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在现代应用开发中&#xff0c;全文搜索是许多应用不可或缺的功能之…...

网络治理新模式:Web3时代的社会价值重构

随着Web3技术的崛起&#xff0c;传统的网络治理模式正在经历革新&#xff0c;这不仅仅是技术的进步&#xff0c;更是对社会价值观念的挑战和重构。本文将深入探讨Web3时代的网络治理新模式&#xff0c;其背后的技术基础、社会影响以及未来的发展方向。 1. 引言 Web3时代&#…...

[个人感悟] MySQL应该考察哪些问题?

前言 数据存储一直是软件开发中必不可少的一环, 从早期的文件存储txt, Excel, Doc, Access, 以及关系数据库时代的MySQL,SQL Server, Oracle, DB2, 乃至最近的大数据时代f非关系型数据库:Hadoop, HBase, MongoDB. 此外还有顺序型数据库InfluxDB, 图数据库Neo4J, 分布式数据库T…...

《数据结构与算法基础》学习笔记——1.2基本概念和术语

一、本章结构 二、四个数据相关专业名词的解释 两者的区别 三、数据结构相关内容 四、逻辑结构的分类 五、存储结构的分类及四种基本存储结构...

Java之线程相关应用实现

后台线程 一个进程中只有后台进程运行&#xff0c;该进程将会结束。 新创建的线程默认为前台线程&#xff0c;Java中只要有一个前台线程运行&#xff0c;就不会结束程序&#xff0c;如果只有后台线程运行&#xff0c;程序就会结束&#xff0c;可以在线程对象启动前执行setDae…...

一加全机型TWRP合集/橙狐recovery下载-20240603更新-支持一加12/Ace3V手机

TWRP是目前安卓平台的刷机神器&#xff0c;可快速刷写第三方ROM或官方系统&#xff0c;刷入TWRP之前需要解锁BL&#xff0c;目前已适配一加多个机型。ROM乐园小编20240603整理&#xff0c;涵盖一加1到一加Ace3V多机型专用TWRP文件&#xff0c;个人机型橙狐recovery适配相对完整…...

小伙子知道synchronized的优化过程吗

synchronized优化 背景&#xff1a;synchronized最初作为Java中的重量级锁&#xff0c;开销大&#xff0c;不被推荐使用。优化&#xff1a;随着JDK的发展&#xff0c;特别是JDK1.6以后&#xff0c;synchronized经历了优化&#xff0c;现在广泛应用于JVM源码和开源框架。 对象…...

鸿蒙面试心得

自疫情过后&#xff0c;java和web前端都进入了冰河时代。年龄、薪资、学历都成了找工作路上躲不开的门槛。 年龄太大pass 薪资要高了pass 学历大专pass 好多好多pass 找工作的路上明明阳关普照&#xff0c;却有一种凄凄惨惨戚戚说不清道不明的“优雅”意境。 如何破局&am…...

SQLite vs MySQL vs PostgreSQL对比总结

开发业务系统时&#xff0c;是绕不开RDBMS&#xff08;关系型数据库&#xff09;的。虽然现在诞生了各种NoSQL的数据库&#xff0c;RDBMS在业务系统中的严谨和优势依然无法取代。 近几年大大小小的项目中&#xff0c;常用的三种RDBMS&#xff08;SQLite&#xff0c;MySQL&#…...

一种改进解卷积算法在旋转机械故障诊断中的应用(MATLAB)

轴承振动是随机振动。在不同的时刻&#xff0c;轴承振动值是不尽相同的&#xff0c;不能用一个确定的时间函数来描述。这是由于滚动体除了有绕轴承公转运动以外&#xff0c;还有绕自身轴线的自旋运动&#xff0c;且在轴承运转时&#xff0c;滚动接触表面形貌是不断变化的&#…...

分布式锁(4):jedis基于Redis setnx、get、getset的分布式锁

1 实现原理 setnx(lockkey, 当前时间+过期超时时间) ,如果返回1,则获取锁成功;如果返回0则没有获取到锁,转向步骤(2)get(lockkey)获取值oldExpireTime ,并将这个value值与当前的系统时间进行比较,如果小于当前系统时间,则认为这个锁已经超时,可以允许别的请求重新获取,…...

linux内存排查工具smem使用

smem 是一个强大的工具,用于分析 Linux 系统中各进程的内存使用情况。-r 和 -k 选项用于指定输出格式和单位。以下是这两个选项的详细解析: -r:按照进程的内存使用量进行排序,默认按 RSS(常驻内存集)排序。-k:将输出的内存单位设为千字节(KB)。使用 smem 的命令示例 …...

云主机相比物理机有哪些优势

随着信息技术的飞速发展&#xff0c;云计算技术逐渐成为现代企业的核心驱动力。其中&#xff0c;云主机作为云计算的重要组成部分&#xff0c;以其高性能、高可用性和灵活便捷的特性&#xff0c;成为企业IT架构的新选择。今天我们就来了解探讨云主机相比传统主机&#xff0c;有…...

ClickHouse-Keeper安装使用

1.rpm 安装 clickhouse-keeper rpm -ivh clickhouse-keeper-23.8.11.28.x86_64.rpm 2.修改keeper的配置文件 vi /etc/clickhouse-keeper/keeper_config.xml修改部分参数 1.可修改日志等存储路径 2.增加监听配置 <listen_host>0.0.0.0</listen_host> 3.server_id…...

全国产飞腾+FPGA架构,支持B码+12网口+多串电力通讯管理机解决方案

GMSL 摄像头 GMSL 是 Maxim 公司推出的一种高速串行接口&#xff0c;适用于视频、音频和控制信号的传输&#xff0c;使用 50Ω 同轴电缆或 100Ω 屏蔽双绞线(STP)电缆时的距离可达 15m 或更长。 Maxim 的方案分为 GMSL、 GMSL2以及GMSL3。GMSL2 跟 GMSL(一代)是兼容的&#xff…...

bat命令 批处理 脚本 windows DOS

常见命令解释 命令示例&#xff1a; 文件1.bat echo offstart notepad.exe timeout /t 5 /nobreak start notepad.exe pause echo 当前时间【%time%】 timeout /t 5 /nobreak echo 延时时间【%time%】 pause echo off 执行bat文件的时候&#xff0c;cmd黑框里不显示批处理…...

【云计算】阿里云、腾讯云、华为云RocketMQ、Kafka、RabbitMq消息队列对比

目录 一、云平台中间件关键信息对比 1、RocketMQ 2、Kafka 3、RabbitMQ 二、中间件详细信息 1、阿里云MQ (一)消息队列RocketMQ (二)消息队列Kafka (三)消息队列RabbitMQ 2、腾讯云MQ (一)消息队列RocketMQ (二)消息队列CKafka (三)消息队列RabbitMQ 3、华为云MQ…...

【JavaScript脚本宇宙】玩转数据存储:深入剖析提升 Web 应用程序性能的六大利器

从本地到云端&#xff1a;全面解析满足各种需求的高性能 JavaScript 数据库库 前言 本文将介绍几个流行的JavaScript数据库库&#xff0c;包括localForage、Dexie.js、PouchDB、LokiJS和NeDB。每个库都有自己的特点和适用场景。通过比较它们的功能和使用方式&#xff0c;可以…...

Web应用和Tomcat的集成鉴权2-Form Authentication

作者:私语茶馆 1.相关章节 1) Web应用和Tomcat的集成鉴权1-BasicAuthentication-CSDN博客 2) Web应用和Tomcat的集成鉴权2-Form Authentication-CSDN博客 集成鉴权+定制化登录 2.前言 上章讲述了Tomcat的Basic Authentication鉴权模式,可以让Web应用和Tomcat的鉴权集成起来…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器

一、原理介绍 传统滑模观测器采用如下结构&#xff1a; 传统SMO中LPF会带来相位延迟和幅值衰减&#xff0c;并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)&#xff0c;可以去除高次谐波&#xff0c;并且不用相位补偿就可以获得一个误差较小的转子位…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...