uniapp中的button（按钮），checkbox（多选框），picker（滚动选择器）组件介绍

button:

按钮。

button组件常用的属性：

• size 选择按钮的大小，其中有两种选择，default为默认大小，是比较大的，mini则是小尺寸。
• type可以选择按钮的样式，primary在不同的地方有不同的表现，微信小程序、360小程序为绿色，App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色。如想在多端统一颜色，请改用default，然后自行写样式。default为默认的白色，而warn为红色的警告按钮。
• form-type有submit提交按钮和reset重置按钮。
  还有open-type属性了更多值及其说明，具体可以前往官网查看

button点击

button 组件的点击遵循 vue 标准的 @click事件。
button 组件没有 url 属性，如果要跳转页面，可以在@click中编写，也可以在button组件外面套一层 navigator 组件。举例，如需跳转到about页面，可按如下几种代码写法执行：

<template>
    <view>
        <navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>
        <button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
        <button type="default" @click="navigateTo('/pages/about/about')">跳转到about页面</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
    </view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                uni.navigateTo({
                    url:url
                })
            }
        }
    }
</script>

checkbox/checkbox-group:

checkbox-group内部有多个checkbox组成，属性有@change,可以根据中的选项发生改变来触发change事件。

checkbox：

多选项目。
属性有value, disabled, checked和color。
disabled表示是否禁用，可选false和true,默认为false.
checked表示当前是否选择,默认为false。
value就是的表示，用来出发checkbox-group中的change事件，并携带checkbox的value。

注意：

• checkbox的默认颜色，在不同平台不一样。微信小程序、360小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
• 如需调节checkbox大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"

picker:

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

普通选择器：

mode = selector

属性有range，range-key，value，selectoe-type，disabled，@change，@cancel。

多列选择器：

mode = multiSelector

属性多了@columnchange，表示：某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标

时间选择器：

mode = time

时间选择器中value表示选中的时间，start和end表示时间范围，格式为"hh:mm".

日期选择器：

mode = date

日期选择器的字符串格式为"YYYY-MM-DD".
其中多了fields：有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI。

省市区选择器：

mode = region

省市选择器中的custom-item:可为每一列的顶部添加一个自定义的项。