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

时间：2021-01-18 09:25:11 阅读：25 评论：0 收藏：0 [点我收藏+]

<!--

1 长按文字复制 selectable

2 对文本内容进行解码

-->

text   123 <

</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 会自己判断当图片出现在视口上下三屏的高度之内的时候自己开始加载图片

-->

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

<!--

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-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%;
}

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

原文：https://www.cnblogs.com/eric-share/p/14290781.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

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

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