uniapp中间大两边小轮播图

超、凢脫俗 2023-01-11 13:07 49阅读 0赞

html部分

<view class="">
    			<swiper :autoplay="false" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx"
    			 :interval="3000" :duration="500" @change="swierChange">
    				<swiper-item v-for="(item,i) in 5" :key="i">
    					<image src="../../static/logo.png" class="slide-image" :class="currentIndex === i?'active':''"></image>
    				</swiper-item>
    			</swiper>
    </view>

js部分

<script>
    	export default { 
    		name: "",
    		data() { 
    			return { 
    				currentIndex: 0
    			}
    		},
    		methods: { 
    			swierChange(e){ 
    				this.currentIndex = e.detail.current
    			},
    		},
    	}
    </script>

css部分

<style>
    		.slide-image { 
    	  position: absolute;
    	  height: 200rpx;
    	  width:75vw;
    	  z-index: 5;
    	  opacity: 0.8;
    	  top: 18%;
    	  margin: 0 20rpx;
    	}
    	
    	swiper { 
    	  height: 60vw;
    	}
    	
    	.active { 
    	  opacity: 1;
    	  z-index: 10;
    	  height: 320rpx;
    	  width: 75vw;
    	  top: 7%;
    	  transition: all 0.2s ease-in 0s;
    	}
    	
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]: /images/20221119/ae6fd880763048f286203d45e4200a11.png

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序轮播图实现中间大两边小的效果（超简单实现）

先上效果图，实现其实很简单，不需要你去调什么样式，写什么逻辑。 ![在这里插入图片描述][20200621163221903.gif] 只要你细心看下文档，你会发现有两个

电玩女神/ 2023年02月19日 16:19/ 0 赞/ 2 阅读

相关 21. uniapp 获取轮播图的数据

<template> <view> 轮播图 </view> </template> <script>

雨点打透心脏的1/2处/ 2023年01月13日 10:58/ 0 赞/ 262 阅读

相关 uniapp中间大两边小轮播图

html部分 <view class=""> <swiper :autoplay="false" :current="currentIndex" :ci

超、凢脫俗/ 2023年01月11日 13:07/ 0 赞/ 50 阅读

相关 uniapp轮播图

<template> <view class=""> <swiper class="swiper" :indicator-dots="indica

ゝ一世哀愁。/ 2023年01月11日 09:10/ 0 赞/ 164 阅读

相关 html轮播图怎么居中,html5+css如何实现中间大两头小的轮播效果

国际惯例，先上效果 ![21f9e081cd4b94f5363b7b82a3236042.png][] 好了，话不多说，上去就是一顿撸。 css: \\{margin:

向右看齐/ 2022年10月11日 13:39/ 0 赞/ 123 阅读

相关 uniapp网络请求/轮播图/scroll-view

设置尺寸自动转换 HBuilderX - 偏好设置 - 编辑器配置 - px转rpx/upx比例 750设计稿 - 比例750/750 = 1 350设

系统管理员/ 2021年09月13日 15:54/ 0 赞/ 874 阅读

相关小程序轮播图

方法一： js代码 Page({ data: { //轮播图配置 autoplay: t

傷城~/ 2021年08月14日 00:13/ 0 赞/ 479 阅读

相关 uniapp实战——-获取轮播图的数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

叁歲伎倆/ 2021年07月25日 16:55/ 0 赞/ 485 阅读

相关 uniapp实战——-实现商品详情轮播图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

布满荆棘的人生/ 2021年07月25日 14:05/ 0 赞/ 742 阅读

相关 uniapp 轮播图

<swiper indicator-dots 是否添加圆点指示器 circular 是否可以循环滑动 autoplay 自动轮播

我就是我/ 2021年07月24日 13:10/ 0 赞/ 701 阅读