小程序 --- swiper(滑块视图容器)

演示

常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面版指示点
indicator-color	color	rgba(0 ,0 ,0 , .3)	指示点颜色
indicator-active-color	color	#000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动 (如果不设置该属性,就会出现往返滑动)

 

---

分析

1. swiper 标签存在默认的宽度和高度swiper

     默认值为 宽为100%；高为150px

2. image标签也存在默认的宽度和高度

      默认值为 宽为320px；高为240px

 

因为两者存在默认高宽的原因,在不加任何样式的情况下,它们的布局情况如下(设计稿宽度为375px)

蓝色:swiper

橙色:image

 

但我们需要的是这种布局：swiper能够完全包裹image

 

1 为了让 swiper 能够完全包裹 image,不影响后续元素的布局.就需要给 swiper 重新设置一个高度,而不是采用默认高度.那这个高度为多少呢??

2 为了让图片宽度占满整个屏幕的宽度,所以要设置图片的宽度为100%（继承父级元素的宽度）,但此时会改变图片的宽高比,所以设置image 的 mode="widthFix"

3 伸缩后的图片高度就是 swiper 的高度.可以由如下公式求出（利用图片伸缩前后的宽高比相等的关系求出图片的高度）

swiper 高度 = 100vw * 原图片高度 / 原图片宽度

 

下面例子的原图 宽度为 520px； 高度为 280px，所以

swiper 高度 = 100vw * 280 / 520

---

完整代码：

wxml

<swiper class="swi" indicator-dots indicator-color autoplay circular interval="2000" >
    <swiper-item wx:for="{{list}}" wx:key="img">
        <image class="img" mode="widthFix" src="{{item.img}}"></image>
    </swiper-item>
</swiper>

wxss

.swi {
  /* cacl : CSS3 新增属性，用来给元素border margin 等设置动态值 */
  height: calc(100vw * 280 / 520);
}
.swi .img {
  width: 100%;
}

js

Page({
  data: {
    list: [
      {
        img: "https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"
      },
      {
        img: "https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"
      },
      {
        img: "https://img.alicdn.com/tfs/TB1prdDGVY7gK0jSZKzXXaikpXa-520-280.jpg_q90_.webp"
      }
    ]
  }
}

 

--- cezlz ---