微信小程序-swiper swiper-item 标签及常见属性

微信小程序-- 标签及常见属性

demo.wxml

<!-- 
  1 轮播图的外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper 标签 存在默认样式
    1 width 100%
    2 height 150px image 存在默认宽度和高度 320 * 240 px
    3 swiper 高度 无法实现由内容撑开
  4 先找出来 原图的宽度和高度 等比例 给 swiper 定 宽度和高度
    原图的宽度和高度 1125 * 352
    swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
    swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
    height: 100vm * 352 / 1125
  5 autoplay 自动轮播 
  6 interval 修改轮播时间 单位ms 1s = 1000 ms
  7 circular 衔接滑动
  8 indicator-dots 显示 指示器 分页器 索引器
  9 indicator-color 指示器未选中的颜色
  10 indicator-active-color 指示器选中的颜色
 -->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
  <swiper-item> 
  <image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/145/O1CN014Rpya31CwS0q0XCW6_!!145-0-lubanu.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/164/O1CN01uNtLXL1D59XP9MS7R_!!164-0-lubanu.jpg"></image></swiper-item>
  <swiper-item><image mode="widthFix" src="//gw.alicdn.com/imgextra/i3/60/O1CN0150z1L71CJWLeepaU5_!!60-0-lubanu.jpg"></image> </swiper-item>
  
  
</swiper>

demo.wxss

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

image{
  width: 100%;
}

示例