uniapp中实现中间大两边小轮播图

组件代码直接引入项目就可以看效果

<template><view class="certificate"><view class="title">{{title}}</view><view class="con-part2-con"><swiper class="swiper-tall" :autoplay="false" :interval="3000" :duration="1000"circular='true' previous-margin='161rpx' next-margin='161rpx' current='0' @change="partSwiperChange"><swiper-item class="con-part2-con-container":class="partcurrentIndex === index?'active-item':''"v-for="(item,index) in partSwiperChangeList" :key="index"><view :class="['info-warp', partcurrentIndex === index?'active':'']"><image class="img" :src="item.pic" mode=""></image></view></swiper-item></swiper></view></view>
</template><script>export default {props:{title:{typeof: String,default:''},data:{typeof: Array,default:()=>[]}},data(){return{partSwiperChangeList: [{pic: 'https://picsum.photos/161/119?1',},{pic: 'https://picsum.photos/161/119?2',},{pic: 'https://picsum.photos/161/119?3',},],partcurrentIndex: 0,}},methods:{partSwiperChange(event) {this.partcurrentIndex = event.detail.current}}}
</script><style scoped lang="scss">.certificate{margin-bottom: 60rpx;padding: 0 15rpx;.title{margin-bottom: 15rpx;width: 108rpx;height: 38rpx;font-family: PingFangSC, PingFang SC;font-weight: 600;font-size: 27rpx;color: #44B00B;line-height: 38rpx;text-align: left;font-style: normal;}.con-part2-con {width: 646rpx;.swiper-tall {.con-part2-con-container {display: flex;align-items: center;width: 323rpx !important;height: 238rpx;overflow: visible;.info-warp {display: block;width: 323rpx;height: 238rpx;// background-color: #000;.img{width: 100%;height: 100%;display: block;}}.active {position: relative;bottom: 36rpx;transform: scale(1.3);transition: all 0.2s ease-in 0s;// background-color: red;}}.active-item{z-index: 999;//使中间的元素放在上面}}}}
</style>

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

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

相关文章

ISP图像处理pipeline简介1

ISP 是什么&#xff1f; ISP (Image Signal Processor)&#xff0c;图像信号处理器&#xff0c;是用于摄影和视频处理的一种专用芯片。它是用来干什么的呢&#xff1f;简单说就是用来将图像传感器&#xff08;CCD, CMOS&#xff09;信号转化成可视的信号的功能&#xff0c;这里…

CSS实现卡片在鼠标悬停时突出效果

在CSS中&#xff0c;实现卡片在鼠标悬停时突出&#xff0c;通常使用:hover伪类选择器。 :hover伪类选择器用于指定当鼠标指针悬停在某个元素上时&#xff0c;该元素的状态变化。通过:hover选择器&#xff0c;你可以定义鼠标悬停在元素上时元素的样式&#xff0c;比如改变颜色、…

java mysql 示例

java mysql 示例 一、登陆mysql&#xff1b;创建账号允许远程访问 -- 创建用户 CREATE USER user% IDENTIFIED BY password; -- 授予远程访问权限 GRANT ALL PRIVILEGES ON *.* TO user% WITH GRANT OPTION;二、关闭防火墙 sudo ufw disable三、下载jar包&#xff0c;并解压…

简单工厂模式大解析:让代码创造更高效、更智能!

个人主页: danci_ &#x1f525;系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#xff1a;探索设计模式的魅力&#xff1a;简单工厂模式 简单工厂模式&#x…

Github学生认真全流程指南!避坑!保姆级教程!

重回学生身份,当然要好好享受一番学生权益了,而学生邮箱就是最好的资源与服务。 关于Github学生包(GitHub Student Developer Pack) Github的学生包里包括Github Pro账户,这是一个高级的 GitHub 账户类型,提供更多功能和服务,如私有仓库、团队协作工具等。以及Github …

CH254X 8051芯片手册介绍

1 8051CPU 8051是一种8位元的单芯片微控制器&#xff0c;属于MCS-51单芯片的一种&#xff0c;由英特尔(Intel)公司于1981年制造。Intel公司将MCS51的核心技术授权给了很多其它公司&#xff0c;所以有很多公司在做以8051为核心的单片机&#xff0c;如Atmel、飞利浦、深联华等公…

编辑距离问题

编辑距离 时间限制&#xff1a;1秒 内存限制&#xff1a;128M 题目描述 设A和B是两个字符串。我们要用最少的字符操作次数&#xff0c;将字符串A转换为字符串B。这里所说的字符操作共有三种&#xff1a; 1、删除一个字符&#xff1b; 2、插入一个字符&#xff1b…

Docker 学习笔记(八):Dockerfile实战篇,制作 Tomcat 镜像,发布镜像到 DockerHub 和阿里云

一、前言 记录时间 [2024-4-13] 系列文章简摘&#xff1a; Docker 学习笔记&#xff08;六&#xff09;&#xff1a;挑战容器数据卷技术一文通&#xff0c;实战多个 MySQL 数据同步&#xff0c;能懂会用&#xff0c;初学必备 Docker 学习笔记&#xff08;七&#xff09;&#x…

(三)ffmpeg 解码流程以及函数介绍

一、视频解码流程 二、函数介绍 1.avformat_network_init 函数作用&#xff1a; 执行网络库的全局初始化。这是可选的&#xff0c;不再推荐。 此函数仅用于解决旧GnuTLS或OpenSSL库的线程安全问题。如果libavformat链接到这些库的较新版本&#xff0c;或者不使用它们&#…

hive窗口分析函数使用详解系列二之分组排序窗口函数

1.综述 我们讨论面试中各大厂的SQL算法面试题&#xff0c;往往核心考点就在于窗口函数&#xff0c;所以掌握好了窗口函数&#xff0c;面对SQL算法面试往往事半功倍。 已更新第一类聚合函数类&#xff0c;点击这里阅读 hive窗口函数聚合函数类 本节介绍Hive聚合函数中的第二类…

如何在seata中编写测试用例

title: 如何在seata中编写测试用例 keywords: [Seata, unit test, junit, mockito, assertj] description: 这篇文章主要介绍了Seata中已经使用的测试用例相关框架&#xff0c;以及社区建议开发者如何更好的编写测试用例 author: 汪忠祥 - trustdecision 技术专家 date: 2024-0…

SecureCRT通过USB-Servial ch340串口无法连接单片机

通过USB To TTL连线 STM32F103-PRO&#xff0c;烧制程序到单片机上&#xff0c;通过SecureCRT通过USB-Servial ch340串口无法链接RS232升USB转TTL连接正确 开发板连接正确 问题&#xff1a;SecureCRT串口连接没有反应 问题分析&#xff1a;1、检查ch340串口驱动 查看设备管…

TQZC706开发板教程:在ZC706上运行ADRV9371(vivado2018.3)

首先需要在github上下载两个文件&#xff0c;本例程用到的文件以及最终文件&#xff0c;我都会放在网盘里面&#xff0c;地址在本文的末尾&#xff0c;需要自行提取 在github上搜索hdl选择第一个-->选择版本-->我所使用的vivado是2018.3版本&#xff0c;所以这里我下载的…

软考 - 系统架构设计师 - 面向对象架构设计案例

问题1&#xff1a; 解决该题&#xff0c;用例和参与者要一起进行分析&#xff0c;首先看到用例 U1 和 U2 是 U3 的扩展&#xff0c;分析用例列表中的用例&#xff0c;可以分析出 U1 和 U2 是Underpaid transaction 和 Record lllegal use&#xff0c;顺序可以颠倒&#xff0c;…

分享 GoLand 2024.1 激活的方案,支持JetBrains全家桶

大家好&#xff0c;欢迎来到金榜探云手&#xff01; GoLand 公司简介 JetBrains 是一家专注于开发工具的软件公司&#xff0c;总部位于捷克。他们以提供强大的集成开发环境&#xff08;IDE&#xff09;而闻名&#xff0c;如 IntelliJ IDEA、PyCharm、和 GoLand等。这些工具被广…

【QT学习】6.控件进阶,C与C++的强制类型转换,自定义控件,qt制作一个简易播放器

1.C与C的强制类型转换 2.自定义控件 要求&#xff1a;制作一个登录页面 1.使用控件拖拽一个页面出来 使用水平布局&#xff0c;垂直布局&#xff0c;网格布局 2.建立自定义控件 1.为项目添加自定义的类 自己写一个控件 2. &#xff08;1&#xff09;创建一个Group Box容器 &a…

springboot整合shiro之——拦截路径

简介Shiro: 1.基本功能 身份认证、授权、加密、会话管理 Web支持、缓存、多线程、测试、允许一个用户假装为另一个用户的身份进行访问、记住我 2. 执行过程 分为五步&#xff1a; Subject 用户主体&#xff1a;请求的发起者&#xff0c;即访问应用的用户 Security Manager 安…

xxl-job调度任务原理解析

xxljob可以对定时任务进行调度&#xff0c;现在看下定时任务调度的过程。XxlJobAdminConfig实现了InitializingBean接口&#xff0c;spring会调用afterPropertiesSet()进行初始化。大致有以下几个过程&#xff1a; admin服务端初始化 JobTriggerPoolHelper.java#toStart()方法…

1.Hexo安装和环境搭建引导

Hexo是一个依赖于一个名为nodejs的程序 因此安装它的方式在Mac和Windows上实际上是一样的 为了在电脑上安装Hexo 需要做两件事 nodejs&#xff0c;基本上是hexo依赖运行的JavaScript框架 Node.js — Run JavaScript Everywheregit&#xff0c;是一个程序&#xff0c;用来管理电…

Traefik和HAProxy全方位对比

在面对各种现代应用部署需求时&#xff0c;选择合适的反向代理和负载均衡器至关重要。Traefik&#x1f6a6;和HAProxy&#x1f6e1;️都是领先的解决方案&#xff0c;但它们各有特点&#xff0c;适用于不同的场景。本文将从多个维度全面对比Traefik&#x1f6a6;和HAProxy&…