微信小程序使用微信组件swiper实现中间大图另外两张小图

最新推荐文章于 2025-07-03 17:19:06 发布

原创

最新推荐文章于 2025-07-03 17:19:06 发布 · 6.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #swiper

在这里插入图片描述

效果实现思路

使用微信组件swiper
swiper组件api previous-margin、next-margin

属性名	类型	默认值	类型说明
previous-margin	String	“0px”	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	“0px”	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

设置当前图片放大（设置css样式）
下面直接贴上代码

banner.wxml

  <swiper  autoplay interval="{
  
  {interval}}" circular previous-margin="{
  
  {leftMargin}}" next-margin="{
  
  {rightMargin}}" bindchange="handleChange">
    <block wx:for="{
  
  {imgUrls}}">
      <swiper-item>
        <image src="{
  
  {item}