微信小程序使用swiper组件实现层叠轮播图
程序员文章站
2022-06-20 10:37:37
本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下
wxml:
本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下
wxml:
<view class="banner-swiper"> <swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" current='{{swipercurrent}}' indicator-color="{{beforecolor}}" indicator-active-color="{{aftercolor}}" circular='{{circular}}' previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperchange" > <block wx:for="{{arr}}" wx:key="key"> <swiper-item> <image src="{{item.images}}" class="slide-image{{index == swipercurrent ? ' active' : ''}}" bindchange="chuangevent" id="{{index}}"></image> </swiper-item> </block> </swiper> </view>
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 }) }, })
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。