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>

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

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

相关文章

标准库STL

标准库STL stringstreamvector自定义类型初始化为一个数 queue stringstream 头文件sstream。格式化字符流 #include <iostream> #include <sstream> using namespace std; int main(){stringstream ss;// hex 以十六进制保存 oct是8进制ss <<89<<…

软件必须要进行跨浏览器测试吗?包括哪些内容和注意事项?

随着互联网的普及和发展&#xff0c;用户对软件的要求越来越高。无论是在台式机、笔记本还是移动设备上&#xff0c;用户都希望能够以最好的体验来使用软件。然而&#xff0c;不同的浏览器在解析网页的方式、支持的技术标准等方面存在差异&#xff0c;这就导致了同一个网页在不…

fpga bitstream userid

fpga version register # xdc 文件 set_property BITSTREAM.CONFIG.USERID "0xDEADC0DE" [current_design] set_property BITSTREAM.CONFIG.USR_ACCESS 0x66669999 [current_design]ug908 在bit下载之后的property可以看到 &#xff0c;GUI里面Tools → Edit Devic…

QT项目实战:拼图小游戏

一、拼图智益-经典游戏&#xff08;开发环境&#xff09; 1&#xff1a;操作系统&#xff1a;Windows 10 x64专业版。 2&#xff1a;开发工具&#xff1a;Qt 5.12.8。 二、拼图智益-经典游戏&#xff08;功能模块&#xff09; 1&#xff1a;功能模块1&#xff1a;游戏启动…

1.1电路模型

1.1电路模型 任何实际电路由以下三部分组成&#xff1a; ①提供电能的能源 – 电源 ②用电装置 – 负载 ③传输电能的金属连线 – 导线 实际电路完成的功能&#xff1a;主要有以下两个方面&#xff1a; &#xff08;1&#xff09;进行能量的产生、传输和转换。&#xff08;如…

flash申请内存失败,导致老化问题解决

背景 在闪光灯初始化阶段客制化了一个buffer&#xff0c;下发到kernel的闪光灯驱动中用于保存读取闪光灯寄存器的值。功能测试都是正常的&#xff0c;但是一旦开始批量跑产线老化测试会有1/4500左右概率的后主摄拍照卡住。定位根因是闪光灯初始化失败&#xff0c;进一步原因就…

Django实现博客标签字符串拆分功能

在Django模板中&#xff0c;可以使用自定义的模板过滤器来实现字符串的拆分。以下是一个简单的示例&#xff0c;演示如何根据特定的分隔符拆分字符串并在模板中显示。 首先&#xff0c;在Django应用的templatetags目录中&#xff0c;创建一个Python模块&#xff0c;例如extras…

C++中的网络协议和网络框架TCP和HTTP

一.OSI七层网络模型 即开放式系统互连。 一般都叫OSI参考模型&#xff0c;是ISO组织在1985年研究的网络互连模型。该体系结构标准定义了网络互连的七层框架&#xff08;物理层、数据链路层、网络层、传输层、会话层、表示层和应用层&#xff09;&#xff0c;即OSI开放系统互连…

牛筋面,一口难忘的劲道滋味

在众多的平凉美食中&#xff0c;牛筋面以其独特的口感和丰富的口味&#xff0c;赢得了无数食客的喜爱。牛筋面&#xff0c;这一名字就给人一种坚韧、有嚼劲的印象。它并非由牛筋制成&#xff0c;而是因其面条的口感如牛筋般劲道而得名。牛筋面的制作过程颇具巧思。选用优质的面…

sheng的学习笔记-AI-K均值算法

ai目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 需要学习前置知识&#xff1a;聚类&#xff0c;可参考 sheng的学习笔记-聚类(Clustering)-CSDN博客 目录 什么是k均值算法 流程 伪代码 数据集 伪代码 代码解释 划分示意图 优化目标 随机初始化 选择聚类数…

工作目录问题,明明有该文件却import错误?

背景 最近在进行多模块集成的时候&#xff0c;出现了import错误的现象&#xff0c;虽然直接用绝对目录解决了&#xff0c;但是显然不优雅&#xff0c;在复习了有关工作目录的知识后&#xff0c;了解到了问题所在。故写此博客&#xff0c;希望对读者有所帮助。 场景说明 有两…

Interposer, 基板,转接板

2. 结构与材料 3. 应用领域 4. 总结 Interposer、基板和转接板在电子封装和连接技术中各自扮演着不同的角色,以下是对它们之间区别的清晰解释: 1. 定义与功能 Interposer: 定义:Interposer是一种中介层技术,用于实现芯片之间的水平互连和垂直互连。功能:通常是一个薄型的…

鸿蒙期末项目(3)

服务器搭建完成之后&#xff0c;编写了诸多api用于数据传输工作&#xff08;略&#xff09; 编写完成之后&#xff0c;回到鸿蒙开发工具&#xff0c;开始编写搜索页面的代码。 打开搜索页面时&#xff0c;先会展示历史搜索记录&#xff08;如果有的话&#xff09;&#xff0c;…

Kafka入门到精通(四)-SpringBoot+Kafka

一丶IDEA创建一个空项目 二丶添加相关依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springf…

SQL 查询中 (+) 符号的含义

您已经很好地解释了 SQL 查询中 () 符号的含义&#xff0c;它确实用于表示左外连接&#xff08;LEFT OUTER JOIN&#xff09;&#xff0c;这是 SQL 中的一种连接操作。以下是对您提供的信息的补充和完善&#xff1a; ### 左外连接&#xff08;LEFT OUTER JOIN&#xff09;&…

hudi系列-schema evolution(一)

hudi+flink在非schema on read模式下也表现出了支持一部分的schema evolution功能,本篇中测试一下在非schema on read模式下,发生各种列变更情况时数据写入与读取情况。 flink 1.14.5hudi 0.13.1mor表思路: 选择mor表是因为它的数据文件有avro和parquet两种格式,能覆盖得更…

java中常用集合(边补充)

java中开发常用集合&#xff08;边补充&#xff09; 一、单列集合Collection1.1List接口1.1.1 ArrayList1.1.2 LinkedList1.1.3 Vector&#xff08;线程安全&#xff09;1.1.4 CopyOnWriteArrayList&#xff08;线程安全&#xff09; 1.2 Set接口1.2.1 HashSet1.2.2 LinkedHash…

用户订单管理API:轻松管理,购物无忧

在当今数字化时代&#xff0c;电子商务已经成为人们购物的首选方式。与传统的实体店相比&#xff0c;电商的优势在于便捷、快速、多样化等特点&#xff0c;使得更多的消费者选择了通过网络购物。而作为电商平台&#xff0c;如何提供更好的购物体验&#xff0c;是每个平台都需要…

企业工程项目管理系统源码:Java版源码解析

一、项目概述 鸿鹄工程项目管理系统是基于Spring Cloud、Spring Boot、Mybatis、Vue和ElementUI技术栈&#xff0c;采用前后端分离架构构建的工程管理软件。它旨在应对企业快速发展中的管理挑战&#xff0c;提升工程管理效率&#xff0c;减轻工作负担&#xff0c;加速信息处理…

一次关于k8s的node节点NotReady的故障排查

master现象 分析 kubectl get nodes -A 看了下pod的状态&#xff0c;好多CrashLoopBackOff kubectl get nodes -o wide 定位到那个具体node的IP地址&#xff0c;登录对应的IP去查看为什么会这样 node节点 journalctl -xe -f -u kubelet 查看此节点的 kubelet 服务&#xff…