手把手带你学习微信小程序 —— 八 （swiper组件 轮播图的实现）

/视图容器 2/

/视图容器 3/

这就是一个 swiper 组件的基本框架样式，然后一些基本的属性设置就直接在 swiper 中设置即可，这得根据官方文档来设置

2. index.wxss

这里样式基本就是设置图片的宽度和高度

3. index.js （划重点）

这里是比较重要的一环，因为不同的手机的尺寸是不一样的，如果我们要针对每个手机进行适配，就需要用到微信官方给的自动获取手机信息的 API 【 wx.getSystemInfoSync();】,动态的获取。然后就可以保证大部分的手机看上去都是一样的效果

1.3 项目源码

---

效果就是 1.1 中所展示的

（1）index.wxml

图片来自网上，可能过一段时间就不是上面所展示的图片，所有代码均在最新版的微信开发者工具编译通过，所以是可以直接使用的

/我们通过 style 样式 把从 js 中传过来的值进行显示，style 和 wxss 一样都可以改变样式，只不过 style 是优先级第二高的，最高的是import 语句/