游戏小程序开发_微信小程序完成带扩大效果的轮

微信小程序实现带放大效果的轮播图       这篇文章主要为大家详细介绍了微信小程序实现带放大效果的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下

效果如图

WXML

 !-- 轮播图 -- 
 view 
 view 
 view 
 swiper autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true" 
 block wx:for="{{slider}}" wx:key="unique" 
 swiper-item data-url="{{item.linkUrl}}" 
 image class='{{swiperCurrent==item.imgId "img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix" /image 
 /swiper-item 
 /block 
 /swiper 
 !-- 指示点 -- 
 !-- view 
 block wx:for="{{slider}}" wx:key="unique" 
 view class="dot{{index == swiperCurrent ' active' : ''}}" bindtap="chuangEvent" id="{{index}}" {{index+1}} /view 
 /block 
 /view -- 
 /view 
 /view 
 /view 

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
.swiper-container{
 position: relative;
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: { 
 //轮播图
 slider: [
 { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
 { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' }, 
 { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
 swiperCurrent: 0,
 * 轮播图
 swiperChange: function (e) {
 //把切换后当前的index传给 swiper 组件的current属性
 this.setData({
 swiperCurrent: e.detail.current
 //点击指示点切换
 // chuangEvent: function (e) {
 // this.setData({
 // swiperCurrent: e.currentTarget.id
 // })
 // },

为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。