微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文實例為大家分享了微信小程序實現帶放大效果的輪播圖，供大家參考，具體內容如下
效果如圖
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
總結
以上是生活随笔為你收集整理的微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Flexsim——初学AGV必看的知识点
- 下一篇： STM32F7xx —— Timer