定期更新网站,汽车网址大全软件下载,响应式网站如何实现,微信公司本文实例为大家分享了微信小程序实现带放大效果的轮播图#xff0c;供大家参考#xff0c;具体内容如下效果如图WXMLWXSS.Carousel{margin-top: 49px;background-color: #fff;}.swiper-container{position: relative;}.swiper-container .swiper{padding-top: 8px;height: 38…本文实例为大家分享了微信小程序实现带放大效果的轮播图供大家参考具体内容如下效果如图WXMLWXSS.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;}JSdata: {//轮播图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
