当前位置: 首页 > 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的鉴权集成起来…...

Drogon框架数据库连接监控终极指南:性能指标与智能告警机制

Drogon框架数据库连接监控终极指南&#xff1a;性能指标与智能告警机制 【免费下载链接】drogon Drogon: A C14/17/20 based HTTP web application framework running on Linux/macOS/Unix/Windows 项目地址: https://gitcode.com/gh_mirrors/dr/drogon Drogon是一个基于…...

Linux端口转发到外网完全教程:iptables DNAT+SNAT实现内网服务暴露

一、什么是外网端口转发Linux端口转发到外网&#xff0c;是指将Linux服务器上某个端口的流量&#xff0c;转发到外网&#xff08;公网&#xff09;的另一台服务器。这样做的典型场景是&#xff1a;你有一台内网服务器没有公网IP&#xff0c;但另一台海外服务器有公网IP&#xf…...

Helm模板智能助手:提升Kubernetes应用部署效率的VSCode插件

1. 为什么你需要一个Helm模板智能助手如果你和我一样&#xff0c;每天都在和Kubernetes的Helm Charts打交道&#xff0c;那你一定对编写templates/目录下那些.yaml文件又爱又恨。爱的是Helm的模板引擎确实强大&#xff0c;能把一堆重复的YAML配置抽象成可复用的模板&#xff1b…...

LMQL:用编程语言精准控制大语言模型输出,告别提示词玄学

1. 项目概述&#xff1a;当自然语言成为编程语言如果你和我一样&#xff0c;既对大型语言模型&#xff08;LLM&#xff09;的能力感到兴奋&#xff0c;又对如何精准、可控地调用它们感到头疼&#xff0c;那么你肯定遇到过这样的场景&#xff1a;你向ChatGPT或Claude提出一个复杂…...

iPhone 5s系统工程解析:LPDDR3内存与E2NAND存储的协同进化

1. 项目概述&#xff1a;iPhone 5s&#xff0c;一场被低估的系统性工程胜利2013年9月&#xff0c;当苹果发布iPhone 5s时&#xff0c;聚光灯几乎全部打在了那个划时代的64位A7处理器上。媒体和消费者的讨论都围绕着“桌面级性能”和“移动计算新时代”展开。作为一名在消费电子…...

终极开源硬件控制方案:5分钟实现OMEN游戏本深度性能调优

终极开源硬件控制方案&#xff1a;5分钟实现OMEN游戏本深度性能调优 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度&#xff0c;自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普OMEN游戏本…...

基于Godot与Roslyn构建现代化.NET IDE:SharpIDE架构解析与实践

1. 项目概述&#xff1a;一个为.NET开发者打造的现代IDE如果你是一个.NET开发者&#xff0c;尤其是长期使用C#进行开发&#xff0c;那么你肯定对Visual Studio和Visual Studio Code这两款工具又爱又恨。Visual Studio功能强大但略显笨重&#xff0c;VS Code轻快但针对.NET的原生…...

Python 爬虫反爬突破:CDN 防护节点穿透采集

前言 当下大型互联网站点、电商平台资讯门户、行业数据网站均全面接入 CDN 内容分发网络&#xff0c;借助全球节点缓存、流量调度、智能分流、节点 IP 隐身、区域访问限制等机制构建底层防护体系。传统爬虫直接请求源站 IP 的方式会被 CDN 节点拦截、跳转、限速、IP 封禁、节点…...

阿里云效前端流水线自动化部署

一、权限准备 如果你想实现这个功能&#xff0c;那么你的云效必须要有权限&#xff01;&#xff01;这非常重要&#xff01;&#xff01;如何确定自己是否有相关权限呢&#xff1f; 流水线权限 制品仓库权限 就是云服务器的权限&#xff0c;这个权限是要你可以读写文件的…...

ASML如何用“先买单后上菜”模式改写半导体设备研发规则

1. 从“被放鸽子”到“先买单后上菜”&#xff1a;ASML的450毫米晶圆博弈论在半导体这个以“摩尔定律”为信仰的行业里&#xff0c;每一次技术节点的跃进都伴随着天文数字的投入和巨大的商业风险。对于设备商而言&#xff0c;最怕的不是技术难题&#xff0c;而是倾尽所有研发出…...