小程序实现3D轮播图效果

小程序通过swiper标签实现3D轮播图效果

一、效果图

二、代码块

1.html

<view wx:if="{{slideList.length>0}}" class="teachLoop"><swiper class="teachSwiper" circular previous-margin="230rpx" bindchange="changeSwiperIndex"><block wx:for="{{slideList}}" wx:index="{{index}}" wx:key="index"><swiper-item class="item"><image src="{{fileUrl+item.slideShowImg}}" class="{{swiperIndex == index ? 'active' : 'no-active'}}" modex="heightFix" /></swiper-item></block></swiper>
</view>

2.css

.teachLoop {padding: 0 30rpx 30rpx 40rpx;position: relative;}
.teachSwiper { width: 100%; height: 250rpx; background-color: #f7f7f7; border-radius: 10rpx;}
.teachSwiper .item { display: flex; justify-content: center; align-items: center;width: 50% !important; }
.teachSwiper .item image { height: 166rpx; width: 166rpx; border-radius: 50%;}
.teachSwiper .item .active { transform: scale(1); transition: all .3s ease-in 0s; }
.teachSwiper .item .no-active { transform: scale(.6); transition: all .3s ease-in 0s; }

3.js

page({swiperIndex: 0,slideList: [],
}),changeSwiperIndex(e) {this.setData({swiperIndex:e.detail.current})
}

三、基础库

此轮播图效果基于最新的基础库2.25.2 老版本的基础库可能渲染出来的效果会不一样！

小程序实现3D轮播图效果相关推荐

微信小程序实现3d轮播图效果（非swiper组件）
首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...

小程序实现3D轮播图效果

一、效果图

二、代码块

三、基础库

小程序实现3D轮播图效果相关推荐

最新文章

热门文章