1.view
代替 原来的 div 标签
----功能去查询
<view hover-class="h-class">
点击我试试
</view>
2. text
- ⽂本标签
- 只能嵌套text
- ⻓按⽂字可以复制（只有该标签有这个功能）
- 可以对空格 回⻋ 进⾏编码
image.png
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
3.image
1.使用"土豆图床” 去存放图片 https://images.ac.cn/
图片大小不能超过 2mb
2.
![]()
image.png
image.png
代码如下
<image src="https://pics.images.ac.cn/image/5f0ebc9aa59c3.html"/>
图片存在默认的高度和宽度 320 *240 原图是200 * 100
3.mode决定 图片的内容 如何 和 图片标签 宽高 做适配
-1.scaleToFill 不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满�image 元素 ········· 默认使用
-2.aspectFit 保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。 ·········页面轮播图 image元素
-3.aspectFill 保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。·······少用
-4.widthFix 宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变 ·······常用
4.小程序中的图片直接就支持懒加载 lazy-load
1.lazy-load 会自己判断 当 图片出现在 视口 上下 三屏的高度 之内的时候 自己开始加载图片
<image lazy-load src="https://pics.images.ac.cn/image/5f0ebc9aa59c3.html"/>
4.swiper ---滚动
1.轮播图外层容器 swiper
2.每一个轮播项 swiper-item
3.swiper标签 存在默认样式
1.width 100% 这个是 100 ----->100vw
2.height 150px 默认 150 所以把你增大
根据图片的比例 把swiper调整为 相应适合的大小.
-----相关属性
image.png
代码如下
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
在swiper中加属性
navigator
相当于 html中的<a>
1.target ---self 在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram
2.url ---String ----- 当前⼩程序内的跳转链接
3.open- type ----- String----- navigate 跳转⽅式
image.png
