微信小程序-7-小程序组件

由于小程序的组件较多，学起来也不可能说将每个组件的每一条属性都记下来，所以这里就是选择很重要的组件以及相对重要的属性来进行记录。

view

代替原来的div标签

• hover-class：指的是用户按这个view标签的时候的样式

text

文本标签

1. 这是一个文本标签
2. 只能在内部嵌套text标签
3. 可支持长按文字复制只有这个标签有这个功能
4. 可以对空格和回车进行编码

• selectable：文本是否可以被复制
• decode：对内容进行编码

image

图片标签

1. 图片标签，组件默认宽度是320px，高度 240px
2. 支持懒加载

• src：图片资源地址

  

• mode：图片裁剪，缩放的比例，具体参数查看官方文档

  

  其中：aspectFit常用于页面轮播图，widthFix则会按照设定的比例进行缩放，宽度定了，高度自己定

• lazy-load：懒加载

  当图片出现在视口的上下三屏的高度之内的时候，自己就会开始加载图片

swiper

小程序当中的轮播组件，必须要与其子组件swiper-item搭配使用

swiper是存在默认格式的：width：100% height：150px

而image的默认格式是320*240，且swiper不支持由内容撑开

所以就应该进行相应的计算，也就是说：
swiper宽度/swiper高度 = 原图的高度/原图的宽度

已知原图尺寸为400*400

所以代码为：

swiper {
  width: 100%;
  height: calc('750rpx *400/400');
}

image {
  width: 100%;
}

• autoplay：自动播放（一般是5s）

• interval：修改轮播时间

• circular：是否循环轮播

  

• indicator-dots：轮播时候下面的点，可以定义颜色indicator-color

  

navigator

导航标签，类似于超链接标签

• url：要跳转的页面路径 绝对路径或者相对路径都可以

  

• target：跳转到当前小程序还是其他小程序，默认self

• open-type：跳转方式，官方文档有。这里着重强调一个属性switchTab，如果不设置这个属性，那么就无法跳转到tarbar上

rich-text

富文本标签 nodes属性来实现接收标签字符串和对象数组

（以后着重研究）

button

按钮

这个是按钮的默认状态，其他样式为：default、primary，warn，plain，loading，disable

大小有两种：default，mini

除了样式，还提供了一些功能性按钮

• contact 联系客服功能
• share 触发用户转发
• getPhoneNumber 获取用户手机号
• getUserInfo 获取用户信息
• launchApp 打开app
• openSetting 打开授权页
• feedback 打开意见反馈

icon图标

微信内置图标

一共有三种属性：type，size，color

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9PvqHu4l-1608084918416)(C:\Users\33007\AppData\Roaming\Typora\typora-user-images\image-20201105092403773.png)]

radio&checkbox

单选框复选框，可通过color来自定义选中颜色；如果要触发事件，就要搭配radio-group/checkbox-group一起使用

想要触发选中什么就打印什么的效果（包含了ES6的写法）

复选框与单选框的逻辑基本一致，自行操作（建议使用循环）