text标签 图片标签 轮播图标签

<!-- 

  1 长按文字复制 selectable

  2 对文本内容 进行 解码

 -->

<text selectable decode>

  text &nbsp; 123 &lt;

</text>

 

 

<!-- 

  image 图片标签

  1 src 指定要加载的图片的路径

    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100

  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配

    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 

    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用

    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用

    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  

    5 bottom。。 类似以前的backgroud-position 

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

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

 -->

 <image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

 

 

 

 

----------------------

<!-- 

  1 轮播图外层容器 swiper

  2 每一个轮播项 swiper-item

  3 swiper标签 存在默认样式

    1 width 100%

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

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

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

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

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

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

    height: 100vw * 352 /  1125

  5 autoplay 自动轮播

  6 interval 修改轮播时间

  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/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>

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

    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>

</swiper>

 

 

   

/* pages/demo10/demo10.wxss */
swiper {
width: 100%;
/* height: calc(100vw * 352 / 1125); */
height: 31.28vw;
}
image {
width: 100%;
}