小程序
小游戏
企业微信
微信支付
扫描小程序码分享
首页使用swiper组件轮播图片，为每张图片设置了border-radius，但是只有右边有效，左边还是方形的，我试过把border-radius值调大，就可以看到圆角了，说明应该是每张图片都被剪裁。我试过设置width、padding、margin都不行，在swiper，swiper-item上设置border-radius还是不行，向大佬们求救( •̥́ ˍ •̀ू )
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你图片设置了，padding-left: 40rpx; 导致的吧
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
谢谢各位热心帮助，问题解决了。原来图片样式在index.wxss 和 app.wxss被重复设置了，把app.wxss那部分代码删了就行，还有padding-left确实会影响圆角显示。（自己作死…………）
这个去掉试试
弄个代码片段看看
看下图片是不是显示完整 可能是缩放的问题 image 加mode：aspectFit 图片缩放，完整显示 可以参考微信文档-组件-image
不是啊、都可以、没有用过你那种设置样式方法、不能帮你指出哪写的不对、我只给图片加了圆角
<!----轮播图--->
<swiper indicator-dots="true" autoplay="true" indicator-active-color="{{mainColor}}" style="height:{{(deviceW-50)/1.5}}px;" class="swiper-v">
<block wx:for="{{pageData.image}}" wx:key="swiperkey">
<swiper-item>
<image src="{{item}}" class="swiper" style="height:{{(deviceW-50)/1.5}}px" />
</swiper-item>
</block>
</swiper>
.swiper {
display: flex;
width: 100%;
border-radius: 10px;
}
.swiper-v {
margin-top: 60rpx;
box-shadow: 0px 140px 17px 0px rgba(30, 32, 57, 0.05);
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你图片设置了，padding-left: 40rpx; 导致的吧
谢谢各位热心帮助，问题解决了。原来图片样式在index.wxss 和 app.wxss被重复设置了，把app.wxss那部分代码删了就行，还有padding-left确实会影响圆角显示。（自己作死…………）
弄个代码片段看看
看下图片是不是显示完整 可能是缩放的问题 image 加mode：aspectFit 图片缩放，完整显示 可以参考微信文档-组件-image
不是啊、都可以、没有用过你那种设置样式方法、不能帮你指出哪写的不对、我只给图片加了圆角
<!----轮播图--->
<swiper indicator-dots="true" autoplay="true" indicator-active-color="{{mainColor}}" style="height:{{(deviceW-50)/1.5}}px;" class="swiper-v">
<block wx:for="{{pageData.image}}" wx:key="swiperkey">
<swiper-item>
<image src="{{item}}" class="swiper" style="height:{{(deviceW-50)/1.5}}px" />
</swiper-item>
</block>
</swiper>
.swiper {
display: flex;
width: 100%;
border-radius: 10px;
}
.swiper-v {
margin-top: 60rpx;
box-shadow: 0px 140px 17px 0px rgba(30, 32, 57, 0.05);
}