微信小程序轮播图

最新推荐文章于 2025-10-22 14:15:32 发布

原创最新推荐文章于 2025-10-22 14:15:32 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

微信小程序专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何在小程序中利用swiper组件实现带有圆角效果的轮播图片，并通过设置overflow属性来隐藏超出部分，达到美观的视觉效果。

<view class="swiper">
	<swiper indicator-dots autoplay interval="2000" duration="500" 
  style=" border-radius: 20rpx;overflow: hidden;"
  >
		<view wx:for="{{swiper}}" wx:key="index">
			<swiper-item>
				<image src="{{item.pic}}" style="width:100%;"></image>
			</swiper-item>
		</view>
	</swiper>
</view>

效果图如下
在这里插入图片描述

圆角效果
重点：设置圆角和overflow:hidden

在swiper中放入样式
<swiper indicator-dots autoplay interval="2000" duration="500" 
  style=" border-radius: 20rpx;overflow: hidden;"
  >