宜宾网站建设公司

微信小程序使用swiper组件实现层叠轮播图

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码，供大家参考，具体内容如下

创新互联主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务开封,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

wxml:

wxss:

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

js:

Page({
 data: {
 //轮播图
 swiperCurrent:1,
 arr: [{
 images: 'images/1.jpg'
 },
 {
 images: 'images/5.jpg'
 },
 {
 images: 'images/3.jpg'
 },
 {
 images: 'images/4.jpg'
 }
 ]
 indicatorDots: true,
 autoplay: true,
 interval: 2000,
 duration: 1000,
 circular: true,
 beforeColor: "white",//指示点颜色 
 afterColor: "coral",//当前选中的指示点颜色 
 previousmargin:'30px',//前边距
 nextmargin:'30px',//后边距
 
 },
 
 //轮播图的切换事件 
 swiperChange: function (e) {
 console.log(e.detail.current);
 this.setData({
 swiperCurrent: e.detail.current //获取当前轮播图片的下标
 })
 },
 //滑动图片切换 
 chuangEvent: function (e) { 
 this.setData({
 swiperCurrent: e.currentTarget.id
 })
 },
})

效果图：

微信小程序使用swiper组件实现层叠轮播图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


文章名称：微信小程序使用swiper组件实现层叠轮播图
转载来于：http://ybzwz.com/article/gicsip.html

其他资讯