小程序学习–3 组件

说明

基本参照官方文档

最新小程序从注册到使用流程

组件简介

组件是视图层的基本组成单元（写在wxml中的标签），自带一些功能和微信风格的样式

共同属性

所有组件都有的属性

• id
• class
• style
• hidden
• data-
• bind*/catch*

组件详解

1.view

视图容器 相当于 HTML的div

    <view class="view"
        hover="{{true}}"          // 是否启用点击态
        hover-class="view-hover"  // 点击后的样式 此选项不设置 hover 没有效果
        hover-start-time="{{10}}" // 按住后多久出现点击态，单位毫秒
        hover-stay-time="{{50}}"  // 手指松开后点击态保留时间，单位毫秒
    >
        <text>this is view</text>
    </view>

2.scroll-view

可滚动视图区域

    <scroll-view
        class="scroll-view"         
        scroll-x="{{false}}"        // 允许横向滚动
        scroll-y="{{true}}"         // 允许纵向滚动
        upper-threshold="50"        // 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
        lower-threshold="50"        // 距底部/右边多远时（单位px），触发 scrolltolower 事件
        scroll-top="0"              // 设置竖向滚动条位置
        scroll-left="0"             // 设置横向滚动条位置
        scroll-into-view="second"   // 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部(优先级高)
        bindscrolltoupper="toupper" // 滚动到顶部/左边，会触发 scrolltoupper 事件
        bindscrolltolower="tolower" // 滚动到底部/右边，会触发 scrolltolower 事件
        bindscroll="scroll"         // 滚动时触发,通过 event.detail 查看
        >
        <view>this is 1</view>
        <view id="second">this is 2</view>
        <view>this is 3</view>
        <view>this is 4</view>
    </scroll-view>

3.swiper

轮播图，swiper 中只可以防止 swiper-item 组件 ，其他组件会被自动删除 不是组件

  <swiper class="swiper"
      indicator-dots="{{true}}"         // 是否显示面板指示点
      autoplay="{{true}}"               // 是否自动切换
      duration="1000"                   // 滑动动画时长
      interval="3000"                   // 自动切换时间间隔
      current="{{2}}"                   // 当前所在页面的 index
      circular="{{true}}"               // 是否采用衔接滑动
      bindchange="swiperchange"         // current 改变时会触发 change 事件
      >  
      <block wx:for="{{imgurl}}" 
          wx:for-item="item"
          wx:for-index="index"
          wx:key="index">
          <swiper-item>
              <image src="{{item}}" 
                  class="swiper-img"/>
          </swiper-item>
      </block>
  </swiper>

4.icon

图标组件

  <icon 
      type="cancel"
      size="40"
      color="#333"
  />

5.text

文本，支持转义符\ <text></text>组件内只支持<text></text>嵌套，相当于 HTML 的 span

<text>{{text}}</text>

6.progress

进度条

  <view class="progress">
      <progress 
          percent="33"            // 百分比0~100
          show-info="{{true}}"    // 在进度条右侧显示百分比
          stroke-width="{{10}}"   // 进度条线的宽度，单位px
          color="{{'#333333'}}"   // 进度条颜
          active="{{true}}"       // 进度条从左往右的动画
      />
  </view>

注意: progress 进度条组件，父元素可以设置display:flex 但是不能设置 align-items,并且父元素要有固定宽度

7.button

按钮

    <button
        size="mini"           // 有效值 default, mini
        type="warn"           // 按钮的样式类型，有效值 primary, default, warn
        plain="{{true}}"      // 按钮是否镂空，背景色透明
        disabled="{{false}}"  // 是否禁用
        loading="{{true}}"    // 名称前是否带 loading 图标
        form-type="submit"    // 用于 <form/> 组件，点击分别会触发 submit/reset 事件
        hover-class="none"    // 指定按钮按下去的样式类
        >
        click me
    </button>

8.checkbox

多选框

  <checkbox-group 
      bindchange="checkedchange"    // <checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
  >
      <label>
          老板
          <checkbox 
              value="boss"          // <checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 val
              disabled="{{true}}"   // 是否禁用
              checked="{{true}}"    // 当前是否选中，可用来设置默认选中
              color="{{'green'}}"   // checkbox的颜色，同css的color
          />
      </label>
       <label>
          销售
          <checkbox value="sale" />
      </label>
       <label>
          程序员
          <checkbox value="programmer" />
      </label>
  </checkbox-group>

9.input

输入框

    <input 
        value="this is input"   // 输入框的初始内容
        type="text"             // input 的类型，有效值：text, number, idcard, digit
        password="{{false}}"    // 是否是密码类型
        placeholder="{{''}}"    // 输入框为空时占位符
        disabled="{{false}}"    // 是否禁用
        maxlength="{{150}}"     // 最大输入长度
        focus="{{false}}"       // 获取焦点
        bindinput="input"       // 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
        bindfocus="focus"       // 聚焦时触发
        bindblur="blur"         // 失去焦点时触发
        bindconfirm="confirm"   // 点击完成按钮时触发
    />

10.picker

从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

    <picker
        mode="selector"     
        range="{{range}}"       // 内容数组
        value="{{rangeval}}"    // 表示选择了 range 中的第几个（下标从 0 开始）
        bindchange="selectorchange" // value 改变时触发 change 事件
        disabled="{{false}}"
        >
        <view>this is {{range[rangeval]}}</view>
    </picker>

    <picker
        mode="time"
        value="{{time}}"        // 表示选中的时间，格式为"hh:mm"
        start="{{timestart}}"   // 开始，字符串格式为"hh:mm"
        end="{{timeend}}"       // 结束，字符串格式为"hh:mm"
        bindchange="timechange"
        disabled="{{false}}"
        >
        <view>this is {{time}}</view>
    </picker>

    <picker
        mode="date"
        value="{{date}}"        // 表示选中的日期，格式为"YYYY-MM-DD"
        start="{{datestart}}"
        end="{{dateend}}"
        bindchange="datechange"
        fields="month"          // 有效值 year,month,day，表示选择器的粒度
        disabled="{{false}}"
        >
        <view>this is {{date}}</view>
    </picker>

Page({
  data : {
    range: ['111', '222', '333', '444', '555', '666' ],
    rangeval: 0,
    time: '12:30',
    timestart: '00:00',
    timeend: '23：59',
    date: '2016-12-12',
    datestart: '2015-12-22',
    dateend: '2017-1-1'
  },
  selectorchange: function (e) {
    this.setData({rangeval : e.detail.value});
  },
  timechange: function (e) {
    this.setData({time: e.detail.value});
  },
  datechange: function (e) {
    this.setData({date : e.detail.value});
  }
})

11.radio

单选 类似 checkbox 用 radio-group 组件包裹

12.slider

滑块

  <view class="slider">
      <slider
          min="{{20}}"                  // 最小值
          max="{{100}}"                 // 最大值
          step="{{1}}"                  // 步进
          disabled="{{false}}"
          value="{{30}}"                // 当前取值
          color="{{'#333'}}"            // 北京条颜色
          selected-color="{{'#fff'}}"   // 完成条的颜色
          show-value="{{true}}"         // 是否显示当前value
          bindchange="sliderchange"
      />
  </view>

13.switch

开关

    <switch 
        checked="{{true}}"    // 是否选中
        type="switch"         // 样式
        color="{{'#333'}}"   // 颜色
        bindchange="switchchange"
    />

14.form

表单,用于将用户输入的数据提交

    <form 
        report-submit="{{true}}"    // 是否返回 formId 用于发送模板消息
        bindsubmit="submit"         //  携带 form 中的数据触发 submit 事件，数据在 event.detail 中
        bindreset="reset"           // 表单重置时会触发 reset 事件
    >
        <input />
        <button>点击</button>
    </form>

15.action-sheet（新版本已废弃，改用 wx.showActionSheet({})）

action-sheet \ action-sheet-item \ action-sheet-cancel 用来设置 底部弹出框

<view class="container">
    <button bindtap="toggle">按钮</button>

    <action-sheet hidden="{{shouldshow}}"
        bindchange="actionchange">
      <action-sheet-item bindtap="itemclick" data-name="name1">this is first</action-sheet-item>
      <action-sheet-item bindtap="itemclick" data-name="name2">this is second</action-sheet-item>
      <action-sheet-cancel>点击取消</action-sheet-cancel>
    </action-sheet>
</view>

var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    shouldshow: true
  },
  toggle: function () {
    this.setData({shouldshow : !this.data.shouldshow});
  },
  actionchange: function (e) {
    console.log(e);
    this.toggle();
  },
  itemclick: function (e) {
    console.log(e);
    console.log(e.target.dataset.name);
  }

})

16.moda（新版本已废弃，改用 wx.showModal({})）

modal 弹出框

<view class="container">
    <button bindtap="toggle">按钮</button>

    <modal 
        confirm-text="选中了"
        cancel-text="不选了"
        hidden="{{shouldshow}}"
        bindconfirm="confirm"
        bindcancel="cancel"
        >
        this is modal text
    </modal>

</view>

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    shouldshow: true
  },
  toggle: function () {
    this.setData({shouldshow : !this.data.shouldshow});
  },
  confirm: function (e) {
    console.log(e);
    this.setData({shouldshow : true});
  },
  cancel: function (e) {
    console.log(e);
    this.setData({shouldshow : true});
  }

})

17.toast（新版本已废弃，改用 wx.showToast({}) 和 wx.hideToast()）

toast 消息提示框

<view class="container">
    <button bindtap="toggle">按钮</button>

   <toast
      hidden="{{shouldshow}}"
      duration="3000"
      bindchange="toast">
      <!--1000毫秒后自动触发change事件-->
      this is toast massage
   </toast>

</view>

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    shouldshow: true
  },
  toggle: function () {
    this.setData({shouldshow : !this.data.shouldshow});
  },
  toast: function (e) {
    this.setData({shouldshow : !this.data.shouldshow});
    console.log(e);
  }

})

18.loading（新版本弃用，使用 wx.showToast({icon:’loading’})）

loading 加载,需要手动关闭

<view class="container">
    <button bindtap="toggle">按钮</button>

   <loading
      hidden="{{shouldshow}}"
      bindchange="loadchange">
      this is loading text
   </loading>

</view>

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    shouldshow: true
  },
  toggle: function () {
    console.log('btn is click');
    this.setData({shouldshow : !this.data.shouldshow});
    let that = this;
    setTimeout(function () {
      that.setData({shouldshow : !that.data.shouldshow});
    },1500)
  },
  loadchange: function (e) {
    console.log(e);
    this.setData({shouldshow : true});
  }

})

19.navigator

页面跳转，相当于 a 标签

    <navigator
        url="../logs/logs"    // 应用内的跳转链接
        open-type="navigate"  // 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
    >
        页面跳转
    </navigator>

20.image

图片

    <image
        src="http://img06.tooopen.com/images/20160818/    tooopen_sy_175833047715.jpg"     // 图片路径
        mode="scaleToFill"              // 图片裁剪、缩放的模式
        binderror="error"               // 当错误发生时
        bindload="load"                 // 当图片载入完毕时
    />

更多图片剪裁模式查看官方文档