• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

从零学习微信小程序(二):常用组件

武飞扬头像
juejin
帮助43

官方详细文档 官方文档很多很详细,这里记的是视频里涉及的

1. view

类似于原来的div标签

image-20210718111739725

特殊属性,看起来属性都与点击有关

image-20210718111914835

2. text

  1. ⽂本标签

  2. 只能嵌套 text

  3. ⻓按⽂字可以复制(只有该标签有这个功能)

  4. 可以对空格回⻋等 进⾏编码

image-20210718112126296

image-20210718112158689

3. image

  1. 图片标签
  2. 默认宽高 320 * 240 px
  3. 支持懒加载

image-20210718112354374

对于图片缩放有多种处理方式,有点多,记不住

image-20210718112509254

由于微信小程序大小受限制,因此多考虑采用外链的方式使用图片

4. swiper

轮播图组件

可以通过配置来实现轮播图的功能

轮播图

实现了一个简易轮播图效果,很简单

默认宽度为100%,默认高度为 150px

image-20210718115347957

常用的配置属性,用来控制循环,衔接等

每一个轮播项采用swiper-item标签来包裹

5. navigator

导航组件,类似于 a 标签

image-20210718120113748

open-type 有效值

image-20210718120418208

这里要注意跳转的规则,有一些不能跳到 tabbar 页面,要注意!

6. rich-text

富文本标签,可以解析成对应标签

<rich-text nodes="{{html}}" bindtap="tap"></rich-text>

数据传递

data: {
    html: "123"
}

在data里新增字段来给富文本添加内容。

可以解析标签,但是我复制不出来,就试不了~~

7. button

配置属性非常多,还是直接看文档吧,文档

image-20210718124426956

按钮演示

image-20210718124501551

按钮的开放功能,可以有一些高操作

image-20210718124637924

<button open-type="getUserInfo">获取用户信息</button>

8. icon

图标标签

image-20210718124850700

image-20210718124919261

<icon type="success" size="40" ></icon>

9. radio

单选标签,可以通过 color 属性来修改颜色

image-20210718125527301

配合radio-group使用,实现单选功能

image-20210718125608508

10. checkbox

复选框,可以通过 color属性来修改颜色,和单选按钮的使用方法差不多

image-20210718125836410

image-20210718125901637

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfbbhb
系列文章
更多 icon
同类精品
更多 icon
继续加载