微信小程序：轮播图

基础知识：

swiper标签存在默认的宽度和高度：100% * 150px

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

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

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

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

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

height: 100vw * 352 / 1125

image标签也存在默认的宽度和高度：320px * 240px

• 图片标签：mode属性 渲染模式

  • widthFix 宽度不变，高度自动变化，保持原图宽高比不变
  • scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
  • aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。（页面轮播图常用）

• 支持懒加载：小程序当中的图片 直接就支持 懒加载 lazy-load

  lazy-load 会自己判断 当图片出现在视口上下三屏的高度之内的时候 自己开始懒加载图片

设计图片和轮播图：

• 原图的宽高：750px * 340px

• 想法：让图片的高度自适应；宽度等于100%

<!-- 轮播图 -->
  <view class="index_swiper">
    <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}" hover-class="navigator-hover" open-type="navigate">
          <image src="{{item.image_src}}" mode="widthFix" lazy-load="false" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>

.index_swiper {
  // swiper的宽高：原图的宽高
  swiper{
    width: 750rpx;
    height: 340rpx;
    image{
      width: 100%;
    }
  }
}