微信小程序swiper滑块试图容器or轮播图 基础知识

1.轮播图 即微信小程序中可滑动的图片

eg：

1. 关于swiper组件的用法 必须要包含swiper- item组件

       轮播项外层容器就是--- swiper 

       每一个轮播项就是--- swiper- item（swiper- item中可放超链接、图片都可以）

2.简单操作上面那个淘宝网上的图片

在wxml中：

<swiper>
  <swiper-item>
    <image mode ="aspectFit" src = "//img.alicdn.com/imgextra/i2/6000000002172/O1CN01bvUiO31Ruoxgio5xa_!!6000000002172-0-octopus.jpg"/>
  </swiper-item>
</swiper>

但操作出来的图片并不是我们所要获取到的样子

 

这是因为swiper中默认   宽度：100%    高：150px

image默认：320*240 px 

改变swiper中的高度：swiper高 = 宽度100vw(即100%、750px) *原图高度/原图宽度(这张为520*280)

在wxss中：

这里说明一下：height不能直接计算 需要用到calc()来操作。

最后保存一下既可以看到图片恢复到原图形态了。