uni-app 微信小程序之swiper轮播图

1. 实现效果

请添加图片描述

2. 完成代码

<template>
	<view class="components-home">
		<view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;">
			<image src='https://xxx.com/img/wccQQP.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
		</view>
		
		<swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
		  duration="500" @change="cardSwiper" indicator-color="#ffffff" indicator-active-color="#ffffff" style="margin-top: -320upx;">
		  <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''">
		    <view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
		      <image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image>
		    </view>
		  </swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'Components',
		data() {
			return {
				swiperList: [{
				  id: 0,
				  type: 'image',
				  url: 'https://xxx.com/img/qdpz/phone1.png',
				}, {
				  id: 1,
				  type: 'image',
				  url: 'https://xxx.com/img/qdpz/phone2.png'
				}, {
				  id: 2,
				  type: 'image',
				  url: 'https://xxx.com/img/qdpz/phone3.png'
				},{
				  id: 3,
				  type: 'image',
				  url: 'https://xxx.com/img/qdpz/phone4.png'
				}],
				cardCur: 0,
			}
		},
		methods: {
			cardSwiper(e) {
			  this.cardCur = e.detail.current
			},
		}
	}
</script>

<style>
	.components-home{
		background: #eee;
	}
	.card-swiper {
	  height: 550upx !important;
	}
	
	.card-swiper swiper-item {
	  width: 260upx !important;
	  left: 245upx;	
	  box-sizing: border-box;
	  padding: 0upx 15upx 50upx 15upx;
	  overflow: initial;
	  /* margin: 100rpx 0; */
	}
	
	.card-swiper swiper-item .swiper-item {
	  width: 100%;
	  display: block;
	  height: 100%;
	  border-radius: 10upx;
	  transform: scale(0.7);
	  transition: all 0.2s ease-in 0s;
	  overflow: hidden;
	}
	
	.card-swiper swiper-item.cur .swiper-item {
	  transform: none;
	  transition: all 0.2s ease-in 0s;
	}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AI助力智慧农业,基于YOLOv3开发构建农田场景下的庄稼作物、田间杂草智能检测识别系统

智慧农业随着数字化信息化浪潮的演变有了新的定义&#xff0c;在前面的系列博文中&#xff0c;我们从一些现实世界里面的所见所想所感进行了很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《自建数据集&#xff0c;基于YOLOv7开发构建农田场景下杂草…

Ubuntu系统下使用apt-get安装Redis

记录一下Ubuntu20.04 64位系统下使用apt-get安装Redis 首先检查一下系统是否安装过redis whereis redismywmyw-K84HR:~$ whereis redis redis: mywmyw-K84HR:~$ 更新软件包 sudo apt-get update -y安装redis sudo apt-get install redis-server -ymywmyw-K84HR:~$ sudo apt…

ELasticsearch:什么是语义搜索?

语义搜索定义 语义搜索是一种解释单词和短语含义的搜索引擎技术。 语义搜索的结果将返回与查询含义匹配的内容&#xff0c;而不是与查询中的单词字面匹配的内容。 语义搜索是一组搜索引擎功能&#xff0c;其中包括根据搜索者的意图及其搜索上下文理解单词。 此类搜索旨在通过…

【S32K3环境搭建】-0.1-安装S32 Design Studio for S32 Platform 3.5

目录&#xff08;S32DS安装步骤详细&#xff09; 1 安装S32 Design Studio for S32 Platform 3.5准备工作 2 下载S32 Design Studio for S32 Platform 3.5安装包 2.1 获取S32DS的License许可 3 安装S32 Design Studio for S32 Platform 3.5 4 打开S32 Design Studio for S…

【网络奇缘】- 如何自己动手做一个五类|以太网|RJ45|网络电缆

​ ​ &#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 本篇文章关于计算机网络的动手小实验---如何自己动手做一个网线&#xff0c; 也是为后面的物理层学习进…

【LabVIEW学习】5.数据通信之TCP协议,控制电脑的一种方式

一。tcp连接以及写数据&#xff08;登录&#xff09; 数据通信--》协议--》TCP 1.tcp连接 创建while循环&#xff0c;中间加入事件结构&#xff0c;创建tcp连接&#xff0c;写入IP地址与端口号 2.写入tcp数据 登录服务器除了要知道IP地址以及端口以外&#xff0c;需要用户名与密…

nodejs+vue+微信小程序+python+PHP在线购票系统的设计与实现-计算机毕业设计推荐

伴随着信息时代的到来&#xff0c;以及不断发展起来的微电子技术&#xff0c;这些都为在线购票带来了很好的发展条件。同时&#xff0c;在线购票的范围不断增大&#xff0c;这就需要有一种既能使用又能使用的、便于使用的、便于使用的系统来对其进行管理。在目前这种大环境下&a…

FairGuard无缝兼容小米澎湃OS、ColorOS 14 、鸿蒙4!

随着移动互联网时代的发展&#xff0c;各大手机厂商为打造生态系统、构建自身的技术壁垒&#xff0c;纷纷投身自研操作系统。 而对于一款游戏安全产品&#xff0c;在不同操作系统下&#xff0c;是否能够无缝兼容并且提供稳定的、高强度的加密保护&#xff0c;成了行业的一大痛…

Kafka中的Partition详解与示例代码

在Apache Kafka中&#xff0c;Partition&#xff08;分区&#xff09;是一个关键的概念。分区的引入使得Kafka能够处理大规模数据&#xff0c;并提供高性能和可伸缩性。本文将深入探讨Kafka中的Partition&#xff0c;包括分区的作用、创建、配置以及一些实际应用中的示例代码。…

C++ day55 判断子序列 不同的子序列

题目1&#xff1a;392 判断子序列 题目链接&#xff1a;判断子序列 对题目的理解 判断字符串s是否为t的子序列 字符串s和字符串t的长度大于等于0&#xff0c;字符串s的长度小于等于字符串t的长度&#xff0c;本题其实和最长公共子序列的那道题很相似&#xff0c;相当于找两…

gitlab高级功能之容器镜像仓库

今天给大家介绍一个gitlab的高级功能 - Container Registry&#xff0c;该功能可以实现docker镜像的仓库功能&#xff0c;将gitlab上的代码仓的代码通过docker构建后并推入到容器仓库中&#xff0c;好处就是无需再额外部署一套docker仓库。 文章目录 1. 参考文档2. Container R…

yolov8添加ca注意力机制

创建文件 coordAtt.py 位置&#xff1a;ultralytics/nn/modules/coordAtt.py ###################### CoordAtt #### start by AI&CV ############################### # https://zhuanlan.zhihu.com/p/655475515 import torch import torch.nn as nn import t…

在Windows11(WSL)中如何迁移Docker

前言&#xff1a; 在Windows 10中Docker是默认安装到WSL中的&#xff0c;而安装到WSL中的任意分发版都是默认放在C盘中的。这样会让我们的C盘资源极度紧张&#xff0c;而且也限制了Docker的镜像数量。 迁移步骤 假设我有一个临时目录“D:\docker”用来存放临时文件&#xff0c;…

【开源】基于Vue和SpringBoot的在线课程教学系统

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

黑马头条数据管理平台项目总结

今天主要看了该项目的介绍&#xff0c;这个黑马头条数据管理平台项目主要包括登录、用户的权限判断、文章内容列表的筛选和分页、文章的增删查改还有图片和富文本编辑器这几大部分组成&#xff0c;项目配套了素材代码&#xff0c;像资源文件、第三方插件、页面文件夹、工具插件…

【MySQL】表的增删查改

增创建库创建表表插入表更新插入表替换插入查询结果 查全列查找指定列查找查找结果去重where条件查找筛选分页结果 改对查询到的结果进行列值更新 删delete 和 truncate 的区别 增 创建库创建表 create database 库名称;use 进入的库名称;create table 表名称; select * from…

Apollo新版本Beta技术沙龙

有幸参加Apollo开发者社区于12月2日举办的Apollo新版本(8.0)的技术沙龙会&#xff0c;地址在首钢园百度Apollo Park。由于去的比较早&#xff0c;先参观了一下这面的一些产品&#xff0c;还有专门的讲解&#xff0c;主要讲了一下百度无人驾驶的发展历程和历代产品。我对下面几个…

单点登录方案调研与实现

作用 在一个系统登录后&#xff0c;其他系统也能共享该登录状态&#xff0c;无需重新登录。 演进 cookie → session → token →单点登录 Cookie 可以实现浏览器和服务器状态的记录&#xff0c;但Cookie会出现存储体积过大和可以在前后端修改的问题 Session 为了解决Co…

Doris 集成 ElasticSearch

Doris-On-ES将Doris的分布式查询规划能力和ES(Elasticsearch)的全文检索能力相结合,提供更完善的OLAP分析场景解决方案: (1)ES中的多index分布式Join查询 (2)Doris和ES中的表联合查询,更复杂的全文检索过滤 1 原理 (1)创建ES外表后,FE会请求建表指定的主机,获取所有…

Git 应用 -- 多人协作开发场景1

目录 1. 既查看本地仓库的分支&#xff0c;又查看远程仓库的分支&#xff1a; git branch -a &#xff08;但是远程的分支只能查看&#xff0c;不能直接切换到远程的分支上&#xff09; 2. 本地的分支和远程的分支建立连接&#xff1a;git checkout -b [分支名] [要连接远程的…