微信小程序基础3--组件

1. text

selectable  = true 设置文本可选

space显示空格 space = ensp & emsp & nbsp

设置decode = true 可解析   < > & '    

2.rich-text富文本

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

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

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


//js
  data: {
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  }

3. progress

https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

  属性： percent 百分比  show-info 在进度条右侧显示百分比 

activeColor 已选择的进度条颜色  backgroundColor 未选择的进度条颜色

active 进度条从左往右的动画 

active-mode = backwards: 动画从头播；forwards：动画从上次结束点接着播

4. button

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

plain 背景色透明 disabled禁用 loading名称前是否带 loading 图标

form-type 用于form组件，点击分别会触发 form组件的 submit/reset 事件

open-type="getUserInfo"  bindgetuserinfo="onGotUserInfo" 获取用户信息 返回e.detail.userInfo是用户信息

5. cheakbox 多选

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

将checkbox放在checkbox-group中

value 选中时触发checkbox-group的bindchange事件，返回e.detail.value中 = value值

checked = true 选中

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>



//js

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

6. picker和picker-view 滚动选择器

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

picker从底部弹出  mode设置选择器类型: selector单列普通选择器 multiSelector多列选择器

picker-view 设置宽高 可以嵌入页面内部 indicator-style="height: 30px;" 设置被选中的行的宽高

其中只可放置 picker-view-column组件，其它节点不会显示。

value值是数组下标（number类型） range是滚动选择器的数组（array类型）

7. slider滑动选择器

https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

min 最小值 max 最大值 

step 每次滑动的步长 取值必须大于 0，并且可被(max - min)整除

value 当前取值 show-value显示当前取值

8. switch开关

type= switch 或 checkbox 

checked 是否选中 

9. navigator

open-type :

navigate 对应 wx.navigateTo  保留当前页面 跳转到子级页面 可返回 父级页面执行onHide

redirect  对应 wx.redirectTo 的功能 前往新页面 不可返回原页面 （平行关系）原页面执行onUnload