当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现一个简单swiper代码实例

微信小程序实现一个简单swiper代码实例

2020年03月09日  | 移动技术网IT编程  | 我要评论

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

话不多说，上截图

html

<swiper class="swiper-block" 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 class="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,
 })
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网