微信小程序（组件--表单：滑块、开关、选择器）_微信小程序 指定步长的滑块

表单组件

（1）表单组件—slider滑动组件

<slider min="10" max="60" show-value="true"></slider>
1

<!-- 拖动滑块时，两个两个的开始增长 -->
<slider min="10" max="60" show-value="true" step="2"></slider>
1
2

<slider min="10" max="60" show-value="true" step="2" value="36"></slider>
1

颜色类属性

滑块属性

拖动事件

<slider min="10" max="60" show-value="true" step="2" value="36" 
bindchange="bindchangeFn"></slider>
1
2

/**完成一次拖动后触发 */
  bindchangeFn(option){
    console.log(option)
  },
1
2
3
4

（2）表单组件—switch开关组件

开关1<switch checked="true"></switch>
开关2<switch type="checkbox" bindchange="swithChangeFn"></switch>
1
2

/**checked改变时触发 */
  swithChangeFn(option){
    console.log(option)
  },
1
2
3
4

注意：
switch类型切换时在iOS自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

信息认证

接下来介绍的滚动选择器在部分场景经常遇到，有时需要验证个人信息，所以先写个“认证页面”

信息认证页面

<view class="checkArea">
  <form>
    <label wx:for="{{infoList}}" wx:key="index">
      <view>{{item.name}}</view>
      <input placeholder="{{item.place}}"
      type="{{item.type}}"
      name="{{item.value}}"></input>
    </label>
  </form>
</view>
1
2
3
4
5
6
7
8
9
10

.checkArea{
  width: 100%;
  padding: 20rpx 5%;
  height: auto;
  box-sizing: border-box;
}
.checkArea form{
  width: 100%;
  height: 100%;
  display: block;
}
.checkArea label{
  height: 80rpx;
  width: 100%;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 1 rgba(0, 0, 0, 0.1);
  margin: 30rpx;
  font-size: 30rpx;
}
.checkArea label view{
  width: 150rpx;
}
.checkArea label input{
  margin-left: 20rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

data: {
    infoList:[
      { name: '姓名', place: '请输入姓名', value: 'name', type: 'text' },
      { name: '手机号', place: '请输入手机号码', value: 'phone', type: 'number' },
      { name: '身份证号', place: '请输入身份证号码', value: 'idcard', type: 'idcard' },
      { name: '邮箱', place: '请输入邮箱地址', value: 'email', type: 'digit' }
    ]
  },
1
2
3
4
5
6
7
8

表单组件

（3）表单组件—picker滚动选择器

注意：除了之前的通用属性外，对于不同的mode，picker拥有不同的属性

（3）表单组件—普通选择器mode = selector

| 属性 | 类型 | 默认值 | 作用 |
|–|–|–|–|–|
| range | array/object array | [] |mode 为 selector 或 multiSelector 时，range 有效 |
| range-key | string | | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
| value | number | 0 | 表示选择了 range 中第几个（下标从 0 开始） |
| bindchange | function | | value 改变时触发 change 事件，event.detail = {value} |
|bindcancel | function | | 取消选择时触发 |

<view class="checkArea">
  <form>
    <label wx:for="{{infoList}}" wx:key="index">
      <view>{{item.name}}</view>
      <input placeholder="{{item.place}}"
      type="{{item.type}}"
      name="{{item.value}}"></input>
    </label>
    <label>
      <view>国籍</view>
      <picker class="country"
      mode="selector"
      value="{{countryIndex}}"
      bindchange="bindPickerChange"
      range="{{countryList}}">
        {{countryList[countryIndex]}}
      </picker>
    </label>
  </form>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**国籍 */
.country{
  margin-left: 20rpx;
  flex-grow: 1;
}
1
2
3
4
5

  data: {
  ryList: ['美国', '中国', '俄罗斯', '日本'],
    countryIndex:0
  },
  /**普通选择器--确定操作 */
  bindPickerChange(option){
    console.log(option.detail.value)
    this.setData({
      countryIndex:option.detail.value
    })
  },
1
2
3
4
5
6
7
8
9
10
11

接下来将range改为object array，利用range-key来指定 Object 中 key 的值作为选择器显示内容

range-key中的值可以为两种形式
①range-key=“{{name}}”
②range-key=“name”

（3）表单组件—多列选择器mode = multiSelector

参考官方文档修改即可

（4）表单组件—日期选择器mode = date

（5）表单组件—省市区选择器mode = region

（6）表单组件—picker-view嵌入组件

• picker-view为嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示
• picker-view-column为滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
• 详情参见官网文档，简单了解即可

导航组件

导航组件常用的navigator，小编之前写过相关文章