微信小程序swiper同时显示三张图片样式

最新推荐文章于 2024-06-26 15:34:05 发布

原创最新推荐文章于 2024-06-26 15:34:05 发布 · 1.7w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用微信小程序的swiper组件实现具有前后图片部分露出效果的轮播图，并提供了详细的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做微信小程序乐趣来首页，样式要求横向滑动，首页显示第一张图片但是要漏出第二张图片的一部分，中间页面要漏出前一张的一部分和后一张图片的一部分，想到小程序swiper组件，刚开始小程序并不支持这种样式，但是后来基础库版本1.9.0以后就都可以了。官方截图如下：

下面上效果图：

直接上代码：

      <view class="pre-box">
        <!--预售产品轮播-->
        <swiper autoplay="{{autoplay}}" interval="3000" class='swiper-pre' next-margin="7px" previous-margin="30rpx">
          <block wx:for="{{sponsorProductList}}" wx:key="{{item.productId}}">
            <swiper-item>
              <view class="pre-product" style="margin-right:16rpx;">
                <image src="{{item.product_image_url}}" class="pre-img" bindtap="toDetail" id="{{item.productId}}" />
                <view class="sponsor-price omit" wx:if="{{item.product_status!=3&&item.product_status!=5}}">¥{{item.product_start_price}}</view>
                <view class="sponsor-price" wx:if="{{item.product_status==3&&item.product_status==5}}">卖光了</view>
                <view class="pre-descripe">
                  <view class="pre-title" bindtap="toDetail" id="{{item.productId}}">{{item.product_name}}</view>
                  <view class="pre-name">{{item.product_title}}</view>
                </view>
                <view class="presell-progress">
                  <view class="progress">
                    <view class="{{item.schedule>100?'hl':'progress-bar'}}" style="width:{{item.schedule}}%;"></view>
                  </view>
                  <view class="progress-box">
                    <view class="progress-detail">{{item.schedule}}%</view>
                    <view class="progress-description">预售进度</view>
                  </view>
                  <view class="progress-box">
                    <view class="progress-detail2">¥{{item.product_support_amount}}</view>
                    <view class="progress-description">支持金额</view>
                  </view>
                  <view class="progress-time">
                    <view class="progress-detail2">{{item.product_leave_time}}</view>
                    <view class="progress-description">剩余时间</view>
                  </view>
                  <view class='cart' bindtap='addCart' data-pi='{{item.productId}}'>
                    <image src='../image/cart_index_wx.png' class='cart-img'></image>
                  </view>
                </view>
                <view class="dashed-line"></view>
                <view class="product-send-time">发货时间：{{item.product_delivery_time}}</view>
                <view style="width: 100%;height: 1em;"></view>
              </view>
            </swiper-item>
          </block>
        </swiper>
        <!--预售产品轮播 END-->
        <!--查看更多-->
        <view class='look-more fz-14' bindtap='preProductList'>查看更多></view>
        <!--查看更多 END-->
      </view>

重点是：

next-margin="7px" previous-margin="30rpx"

css：

.pre-box{width:
100%;height:
auto;margin-top:
20px;}

.swiper-pre{height:
814rpx;background: #F6F6F6;width:
100%;text-align:
center}

.pre-product{position:
relative;background: #FFF;margin-right:8px;}

.pre-img{width:
100%;height:
450rpx;}

大功告成，下面是我们小程序二维码，大家可以扫扫看：