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

时间:2024-04-14 10:22:35

    上一篇咱们写的轮播图,还记得长啥样么?上图:

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

 

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

    下面,我们优化优化界面效果:

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

    上码: 样式补充个如下

.swiper-box{

    padding: 20rpx 20rpx 20rpx 20rpx;

}

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

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

 

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

上码:

 

.slide-image{

    width:100%;

    height:100%;

    overflow:show;

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

}

效果给来:

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

 

这样看起来,有没有舒服很多?

 

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

 

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

 

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

这个问题回头咱在修改。

 

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

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

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