小程序轮播图——技巧篇

需求

微信swiper组件使用方法完善

回顾

• swiper-item 与内部展示的内容的宽度差，形成视觉上的swiper-item间隔，实际上swiper-item包括了空白的部分

视觉上左边间隔40，右边间隔50，swiper-item宽度420

视觉上左边间隔40，右边间隔50，swiper-item宽度420

实现

• swpier-item宽度 定宽 470
• 注意使用 !important
• item内内容设置左右margin分别为40 10

需求二

展示前后两张轮播的一部分

需求二：展示前后两张轮播的一部分

要点

• swiper-item 定宽
• swiper privious-margin属性的使用
• 数学计算

实现

定宽

计算两侧留出的宽度：（750 - swiperitemwidth）/2，该值设置给swiper属性privious-margin

因此明白原理，并合理使用previous-margin next-margin，面对其它的设计布局也难不倒我们，比如：

图片描述

• swiper宽度定为420+50，为什么是加50不是加100？item内margin： 0 auto，根据设计稿计算前后要设置的margin即可

作者简介：黄杰，芦苇科技web前端开发工程师 专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。