常见组件 - 简书

常见组件

view,text,rich-text,button,image,navigator,icon.swiper,radio,checkbox

1. view

替代原来的 div 标签

<view hover-class="h-class">
点击我试试
</view>

2. text

文本标签
只能嵌套text
长按文字可以复制（只有该标签有这个功能）
可以对空格回车进行编码

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

代码：

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

3. image

图片标签，image组件默认宽度320px、高度240px
支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	scaleToFill	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
缩放模式：
scaleToFill
aspectFit(常用)
aspectFill
widthFix(常用)
详情见：image

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	是否循环轮播

swiper 滑块视图容器
swiper-item 滑块默认宽度和高度都是100%

5. navigator

导航组件类似超链接标签
属性：

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
opentype	String	navigate	跳转方式

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，决定需要返回⼏层
exit	退出小程序，target="miniProgram"时生效

6. rich-text

富文本标签
可以将字符串解析成对应标签，类似 vue中 v-html 功能

nodes属性：
nodes属性支持标签字符串和对象数组
标签字符串：

<rich-text nodes="{{html}}"></rich-text>
html:'<div>123</div>'

对象数组：

html:[
      {
        // 1 div标签 name属性来指定
        name:"div",
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class  style
          class:"my_div",
          style:"color:red;"
        },
        // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
        children:[
          {
            name:"p",
            attrs:{},
            // 放文本
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]

属性	说明	类型	必填备注
name	标签名	string	是支持部分受信任的 HTML 节点
attrs	属性	object	否支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否结构和 nodes ⼀致

文本节点：type = text

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

nodes 不推荐使用 String 类型，性能会有所下降。
rich-text 组件内屏蔽所有节点的事件。
attrs 属性不支持 id ，支持 class 。
name 属性大小写不敏感。
如果使用了不受信任的 HTML节点，该节点及其所有子节点将会被移除。
img 标签仅支持网络图片
详情见：rich-text

7. button

<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
default>
</button>

详情见 button

8. icon

代码：

<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="#ccc"/>
</block>

详情见：icon

9. radio

需要搭配 radio-group ⼀起使用
详情见：radio

10. checkbox

需要搭配 checkbox-group ⼀起使用
详情见：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html