游戏小程序制作_微信小程序完成一个简略swiper代

微信小程序实现一个简单swiper代码实例       这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

话不多说,上截图

HTML

 swiper previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindchange="swiperChange" circular="true" 
 block wx:for="{{totalData.banners}}" wx:index="{{index}}" wx:key="bannerList" 
 swiper-item 
 image mode="aspectFill" src="{{item.cover}}" class="slide-image {{swiperIndex == index 'active' : ''}}" / br /swiper-item 
 /block 
 /swiper 

css

.swiper-block {
 height: 320rpx;
 width: 100%;
.swiper-item {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 overflow: unset;
 text-align: center;
.slide-image {
 height: 230rpx;
 width: 526rpx;
 border-radius: 10rpx;
 box-shadow: 0px 3px 10px 0px rgba(51, 51, 51, 0.3);
 margin: 0 rpx 30rpx;
 z-index: 1;
.active {
 transform: scale(1.21);
 transition: all 0.2s ease-in 0s;
 z-index: 20;
}

js

swiperChange(e) {
 const that = this;
 that.setData({
 swiperIndex: e.detail.current,
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/jingyan/3240.html