【微信小程序开发（2）---轮播图展示】

app.json中已经配置

{
"pages":[
 "pages/demo10/demo10"
]
}
           

demo10.wxml

(通过swiper标签来进行轮播图的设置)

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item> <image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/126/O1CN01fOi05n1CnkYRnKbSS_!!126-0-luban.jpg" /></swiper-item>

<swiper-item> <image  mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /></swiper-item>
      
<swiper-item> <image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg" /></swiper-item>
</swiper>
           

学习笔记：

< 轮播图外层容器 swiper

每一个轮播项 swiper-item

swiper 标签存在默认样式

width 100%

height 150px image 存在默认宽度和高度 320 * 240

swiper 高度 内容无法实现 由内容撑开

先找出来 原图的高度和宽度 等比例 给swiper 定 宽度和高度

原图的宽度和高度 1125 * 352 px

swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

所以 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

height ：100 vw * 352 / 1125

autoplay:自动轮播

interval 修改轮播时间

circular 衔接轮播

indicator-dots 显示 指示器 （分页器/索引器）

indicator-color 指示器的未选中的颜色

indicator-active-color 指示器的选中的颜色>

demo10.wxss

(轮播图片样式显示)

swiper{
  width: 100%;
  height:calc( height ：100vw * 352 / 1125);
}
image{
  width: 100%; 
}
           

手机模拟器显示：

声明：所用的模拟适配机型为iPhone5、iPhone6/7/8等均可。