wx小程序-swiper显示上一张下一张压边且无缝轮播

特点1：扩展左右滑动两边各显示一半其它的item

特点2：无缝轮播：在swiper中加circular属性即可

效果：

swiper1

siwper2

index.wxml

<!-- 轮播  next-margin="40rpx" previous-margin="40rpx" -->
  <swiper circular class="banner" next-margin="40rpx" previous-margin="40rpx" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
      <swiper-item wx:for="{{banner}}" wx:key="id" class="back">
          <block wx:if="{{item.link>0}}" class="bannerimge">
              <navigator url="/pages/goods/goods?id={{item.link}}">
                  <image style="margin:0px;border:0px;width:100%;height:100%" src="{{item.url}}" background-size="cover"></image>
              </navigator>
          </block>
          <block wx:else class="bannerimge">
              <image src="{{item.url}}" background-size="cover"></image>
          </block>
      </swiper-item>
  </swiper>

<swiper circular class="banner" next-margin="40rpx" previous-margin="40rpx" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{banner}}" wx:key="id" class="back">
<block wx:if="{{item.link>0}}" class="bannerimge">
<navigator url="/pages/goods/goods?id={{item.link}}">
<image style="margin:0px;border:0px;width:100%;height:100%" src="{{item.url}}" background-size="cover"></image>
</navigator>
</block>
<block wx:else class="bannerimge">
<image src="{{item.url}}" background-size="cover"></image>
</block>
</swiper-item>
</swiper>

index.wxss

.banner {
    width: 100%;
    height: 306rpx;
    background-color: #ffffff;
}

.banner .back {
    width: 670rpx;
    height: 306rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner .back image {
    width: 670rpx;
    height: 306rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
}

.banner {
width: 100%;
height: 306rpx;
background-color: #ffffff;
}

.banner .back {
width: 670rpx;
height: 306rpx;
display: flex;
justify-content: center;
align-items: center;
}

.banner .back image {
width: 670rpx;
height: 306rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}

另外补：banner json

"banner":[
{
"id":1,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/a46277ace4994ff4bfdaf19f5ddffc3b.jpg",
},
{
"id":2,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/5b436bf4687c4129b92cddfd2ab13f8e.jpg",
},
{
"id":3,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/330957b2ce914329a5bc3cbffb9ffcb2.jpg",

}
],

"banner":[
{
"id":1,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/a46277ace4994ff4bfdaf19f5ddffc3b.jpg",
},
{
"id":2,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/5b436bf4687c4129b92cddfd2ab13f8e.jpg",
},
{
"id":3,
"link":"",
"url":"http://dev-ywzt-bucket.oss-cn-beijing.aliyuncs.com/item/2020-01-07/330957b2ce914329a5bc3cbffb9ffcb2.jpg",

}
],

最后编辑于：2020.01.14 14:22:08