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

最近在做微信小程序乐趣来首页，样式要求横向滑动，首页显示第一张图片但是要漏出第二张图片的一部分，中间页面要漏出前一张的一部分和后一张图片的一部分，想到小程序 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: 
   814 
   rpx 
   ; 
   background: #F6F6F6 
   ; 
   width: 
   100% 
   ; 
   text-align: 
   center 
   } 
  

 
    .pre-product 
    { 
    position: 
    relative 
    ; 
    background: #FFF 
    ;margin-right:8px;} 
   
 
     .pre-img 
     { 
     width: 
     100% 
     ; 
     height: 
     450 
     rpx 
     ;} 
    

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

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

猜你喜欢