微信小程序-组件(常用)
微信小程序中的组件
1.view相当于css中的div标签(视图容器)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | string | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-stop-propagation | boolean | false | 是否组织事件冒泡 |
| hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | number | 400 | 手指松开后点击态保留时间,单位毫秒 |
| view标签更多的是处理界面样式,相当于普通的div使用即可 |
2.text相当于css样式中的span标签(内容组件)
特性:
专门用来存放文本,该标签只能搭配text嵌套使用;
最重要的是 在微信小程序之中,只有该标签能够被长按复制;
而且该标签能够对空格以及回车进行编码;
| 属性 | 類型 | 默认值 | 说明 |
|---|---|---|---|
| decode | boolean | false | 是否能被解码 |
| user-select | boolean | false | 文字是否可选 |
Tip.decode可以解析的有 < > & '    ,而且各个操作系统的空格标准并不一致. |
3.image(媒体组件)
图片组件,该组件默认宽度320px,高度240px 支持懒加载
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图片资源地址 | |
| mode | String | scaleToFill | 图片裁剪、缩放的模式 |
有关mode的常用的值:
| 属性值 | 说明 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
4.swiper-微信内置轮播图
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
轮播图外层容器-swiper 每一个轮播项 放一段代码吧
<swiper >
<swiper-item > <image src="https://i1.hdslb.com/bfs/archive/5d181fa8d9b526de6c52cf24bda50d591632a6fe.jpg@336w_190h.webp" /></swiper-item>
<swiper-item > <image src="https://i1.hdslb.com/bfs/archive/5d181fa8d9b526de6c52cf24bda50d591632a6fe.jpg@336w_190h.webp" /></swiper-item>
<swiper-item > <image src="https://i1.hdslb.com/bfs/archive/5d181fa8d9b526de6c52cf24bda50d591632a6fe.jpg@336w_190h.webp" /></swiper-item>
</swiper>
运行效果:
我们加的图片是304x190的图片,从这里我们可以看出,swiper它自带了一定样式,width:100%,height:150px 同时 image 页自带了一定属性 320x240 (哈哈,没想到吧,我自己也没想到)
由此,我们得出结论 -swiper 的高度 无法实现由内容撑开- 这里我得去看看解决办法
--2021年5月8日
swiper-基础特性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 |
持续更新中...
