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

最新推荐文章于 2024-05-26 09:15:42 发布

飞羽轩

最新推荐文章于 2024-05-26 09:15:42 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：微信小程序 swiper 层叠轮播图

本文链接：https://blog.youkuaiyun.com/weixin_42679187/article/details/89450982

刚开始并没有接触到层叠轮播图，拿到这个案列的时候特意查阅了一下资料，发现previousmargin和nextmargin可以试下层叠效果，就尝试着用了一下。

微信小程序XX.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>

微信小程序XX.wxss下