小程序组件

小程序基础库版本2.5.2 ===> 对应微信版本7.0.0

表单组件 picker

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

mode	说明
selector	普通选择器
multiSelector	多列选择器
time	时间选择器
date	日期选择器
region	省市区选择器

商详的图片预览在小程序中用gallery来实现。

底部弹窗用half-screen-dialog

不要看weUI的input，老版本的表单，后续已不再维护。新版本看form。
尤其需要看验证码的部分。

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

  /**
   * 组件的属性列表
   */
  properties: {
    propA: String,
    propB: String
  },

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

label

用来改进表单组件的可用性。使用for属性找到对应的id，或者将控件放在该标签下，当点击 label 时，就会触发对应的控件。目前可以绑定的控件有： button, checkbox, radio, switch, input。

form

表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

input

placeholder-style 指定 placeholder 的样式
placeholder-class 指定 placeholder 的样式类

confirm-type 设置键盘右下角按钮的文字，仅在type='text'时生效：

send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

事件

bindinput 键盘输入时触发
bindfocus 输入框聚焦时触发
bindblur 输入框失去焦点时触发
bindconfirm 点击完成按钮时触发

scroll-view隐藏滚动条方法

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

双向绑定

model:value 仅支持单一字段的绑定，如

<input model:value="{{name}}" />

不支持如下情况：

<input model:value="{{info.name}}" />

在自定义组件中传递双向绑定

<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

<custom-component model:my-value="{{pageValue}}" />

当输入框的值变更时，自定义组件的 myValue 属性会同时变更，这样，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。

在自定义组件中触发双向绑定更新

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      // 更新 myValue
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

<custom-component model:my-value="{{pageValue}}" />

当组件使用 setData 更新 myValue 时，页面的 this.data.pageValue 也会同时变更，页面 WXML 中所有绑定了 pageValue 的位置也会被一同更新。

全局置灰

打开 app.wxss 文件，在第一行加上

page {
  filter: grayscale(100%);
}