每日内涵微信小程序-2-轮播图圆角

    上一篇咱们写的轮播图，还记得长啥样么？上图：

 

    这样子，边框、菱角分明的，不是很美观。

    下面，我们优化优化界面效果：

    1.首先都给缩进下，搞点边框出来，虽然说要充分利用手机屏幕，但是还是要考虑体验感的嘛。

    上码： 样式补充个如下

.swiper-box{

    padding: 20rpx 20rpx 20rpx 20rpx;

}

怎么样，缩进点padding 是不是有点舒服感觉。

 

2. 图片的边角是很尖锐是，好吧，搞个圆角的效果。

上码：

 

.slide-image{

    width:100%;

    height:100%;

    overflow:show;

    border-radius: 20rpx 20rpx 20rpx 20rpx;

}

效果给来：

 

这样看起来，有没有舒服很多？

 

好吧，虽然这个里头还有个BUG ，就是 图片自己在那滚动的时候，图片滑过，还是有菱角出现，不过这个目前不影响， 就先这样吧， 我截个图给你们瞧瞧：

 

 

看到没，图片在滚动的时候，右边刚出来的点，都是直角的，等到图片正了，就再自动的变味圆角的了。

这个问题回头咱在修改。

 

微信小程序开发 每日内涵，每天一点点进步，成就完美人生。

个人公众号上分享开发代码及进度，欢迎扫码骚扰：