微信小程序用swiper做旋转木马缩放轮播图

主要还是用到css3的特性，利用transition动画和transform:scal()属性。

wxml

<view class="vip-center-container"><swiper  class="swiper-block"  previous-margin="60rpx" next-margin="60rpx" current="0" bindchange="swiperChange"><block wx:for="{{bgImages}}" wx:index="{{index}}"><swiper-item class="swiper-item"><view style="background:url('{{item}}');background-repeat: no-repeat;background-size:cover;" class="slide-image {{swiperIndex == index ? 'active' : 'dis-active'}}"></view></swiper-item></block></swiper>
</view>

wxss


.vip-center-container{padding-top: 48rpx;background-color: rgba(42, 44, 53, 1);
}
.swiper-block{height: 400rpx;width: 100%;
}
.swiper-item{display: flex;flex-direction: column;justify-content: center;align-items: center;overflow:unset;
}
.slide-image{height:315rpx;width: 630rpx;border-radius: 12rpx;box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2); z-index: 1;
}.active{transform: none;transition:all .2s ease-in 0s;z-index: 20;
}
.dis-active{transform: scale(0.9);transition:all .2s ease-in 0s;
}

 swiperChange(e) {this.setData({swiperIndex: e.detail.current,})},

微信小程序用swiper做旋转木马缩放轮播图相关推荐

微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
微信小程序前端动态获取最新的轮播图优化
现在我们有一个这样的需求就是后台改了轮播图的图片以及更新或者换位置这是前端不能即使知道就需要用到websocket 这样做虽然很简单但代码量也很大所以我想出了一个方案: 思路 : 1.既然我们 ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序电影App实现导航和轮播
最终的目的: 底部:我们要搞好这样的底部要在app.json填写tabBar 在pages下面填写tabBar "tabBar": {"color": &quo ...
微信小程序开发02-设置自动滚动轮播图片
设置自动滚动图片首先在xx.xml中: <swiper class="banner" indicator-dots indicator-color="rgba(25 ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
制作自己的微信小程序要怎么做？
现在不少人都想要制作自己的微信小程序,不管是企业还是商家都在咨询相关的问题.那么制作自己的微信小程序要怎么做?流程和费用分别又是怎么样的呢?下面个大家一起来看看. 步骤一:要有自己的小程序账号首先我 ...

微信小程序用swiper做旋转木马缩放轮播图

微信小程序用swiper做旋转木马缩放轮播图相关推荐

最新文章

热门文章