本文实例为大家分享了微信小程序实现带放大效果的轮播图，供大家参考，具体内容如下
效果如图
WXML
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传给组件的current属性
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指示点切换
// chuangEvent: function (e) {
// this.setData({
// swiperCurrent: e.currentTarget.id
// })
// },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
本文标题: 微信小程序实现带放大效果的轮播图
本文地址: http://www.cppcns.com/wangluo/javascript/314197.html
