第九节:基本组件

1. 基本组件

小程序提供了常用的标签组件用于构建页面

组件

前端的菜鸡,你的福利来了

1.1. view

类似 div

属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果

1.1.1. 代码

  <view hover-class="h-class">
  点击我试试
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

1.2. text

显示普通的文本 text只能嵌套text

属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
decode Boolean false 是否解码

1.2.1. 代码

  <text selectable="{{false}}" decode="{{false}}">
    普 通
  </text>

1.3. image

图片标签,image组件默认宽度320px、高度240px

注意:该标签 其实是 web中的 图片标签 和 背景图片的结合!!! 并且不支持以前的web中的背景图片的写法!!!

属性名 类型 默认值 说明
src String 图片资源地址,支持云文件ID(2.2.3起)
mode String ‘scaleToFill’ 图片裁剪、缩放的模式
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效

mode 有效值:

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式 说明
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域

前端菜鸡,别急还有更厉害的

1.4. swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
interval Number 5000 自动切换时间间隔
circular Boolean false 是否采用衔接滑动

1.4.1. swiper

滑块视图容器。

1.4.2. swiper-item

滑块

默认宽度和高度都是100%

1.5. video

视频。该组件是原生组件,使用时请注意相关限制。

属性名 类型 默认值 说明
src String 要播放视频的资源地址,支持云文件ID(2.2.3起)
duration Number 指定视频时长
controls Boolean true 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
autoplay Boolean false 是否自动播放
loop Boolean false 是否循环播放
muted Boolean false 是否静音播放
<video src="{{src}}" controls></video>
上一篇
下一篇
Copyright © 2022 Egon的技术星球 egonlin.com 版权所有 帮助IT小伙伴学到真正的技术