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

本文介绍如何使用微信小程序的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;}

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




要在微信小程序中实现 `swiper` 组件显示带有圆角的图片,可以通过以下方式完成。以下是详细的实现过程以及注意事项: --- ### 实现思路 #### 1. 设置外层容器样式 为了让轮播图整体呈现圆角效果,需要在外层容器 `.swiper` 上应用 `border-radius` 属性,并配合 `overflow: hidden` 隐藏超出边界的区域[^3]。 ```css /* 外层容器 */ .swiper { width: 100%; height: 298rpx; border-radius: 14rpx; /* 设置圆角大小 */ overflow: hidden; /* 关键属性,隐藏溢出部分 */ } ``` #### 2. 图片组件样式 对于内部的 `image` 组件,也需要单独设置宽度、高度和圆角属性。虽然设置了外层容器的 `overflow: hidden`,但在某些设备上可能仍会存在渲染问题,因此建议同时图片添加 `border-radius`[^5]。 ```css /* 图片样式 */ .swiper-image { width: 100%; height: 100%; border-radius: 14rpx; /* 同步外层圆角大小 */ } ``` #### 3. 容器嵌套关系 确保 HTML 结构清晰合理,通常可以将 `swiper` 放置在一个独立的视容器中,便于控制布局和样式。 ```html <view class="banner-wrap"> <swiper class="swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500" > <swiper-item wx:for="{{images}}" wx:key="index"> <view class="swiper-item"> <image class="swiper-image" src="{{item.src}}" mode="aspectFill" ></image> </view> </swiper-item> </swiper> </view> ``` #### 4. 特殊情况适配 在 iOS 设备上可能会出现圆角失效的情况,这通常是由于硬件加速引起的渲染问题。可以在 CSS 中增加 `transform: translateY(0)` 来强制触发 GPU 渲染。 ```css .swiper { transform: translateY(0); } .swiper-image { transform: translateY(0); } ``` --- ### 示例代码 以下是一个完整的示例代码片段,展示如何实现带圆角的 `swiper` 轮播图。 ```html <!-- WXML --> <view class="banner-wrap"> <swiper class="swiper" indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="3000" duration="500" > <swiper-item wx:for="{{images}}" wx:key="index"> <view class="swiper-item"> <image class="swiper-image" src="{{item.src}}" mode="aspectFill" ></image> </view> </swiper-item> </swiper> </view> ``` ```css /* WXSS */ .banner-wrap { margin: 0 auto; width: 686rpx; height: 298rpx; } .swiper { width: 100%; height: 100%; border-radius: 14rpx; overflow: hidden; transform: translateY(0); /* 解决iOS圆角失效问题 */ } .swiper-item { display: flex; justify-content: center; align-items: center; } .swiper-image { width: 100%; height: 100%; border-radius: 14rpx; /* 同步外层圆角大小 */ transform: translateY(0); /* 解决iOS圆角失效问题 */ } ``` --- ### 注意事项 1. **模式选择** 使用 `mode="aspectFill"` 可以让图片按比例缩放并裁剪多余部分,从而适应固定尺寸的轮播框[^1]。 2. **性能优化** 如果图片较多,建议提前加载资源或将未使用的图片懒加载,减少内存占用。 3. **调试技巧** 在开发工具中预览时可能出现正常显示而在真机测试时异常的现象,此时应重点关注不同平台(Android/iOS)的具体表现差异[^5]。 --- ###
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值