微信小程序开发实战（12）：滑杆组件（slider）和form组件

本是古典何须时尚 2023-03-01 03:22 47阅读 0赞

\-----------支持作者请转发本文-----------

1. 滑杆组件（slider）

slider组件用于通过滑杆改变数值，该组件有如下几个属性。

min：Number类型，默认值是0，表示滑杆能滑动的 最小值

max：Number 类型，默认值是100，表示滑杆能滑动的最大值

step：Number类型，默认值是1，表示滑杆滑动的步长，取值必须大于0，并且可被max - min整除

disabled：Boolean类型，默认值是false，表示slider组件是否禁用

value：Number类型，默认值是0，slider组件当前的值

show-value：Boolean类型，默认值是false，表示是否显示当前的值（在slider组件的右侧显示）

bindchange：EventHandle类型， 完成一次拖动后触发的事件（假设event是事件触发的函数的参数），event.detail.value可获取当前的值

下面的布局代码放置了3个slider组件，第一个slider组件设置了step属性值为5，并没有指定show-value属性，所以第一个slider组件不会在右侧显示当前的值。后两个slider组件都设置了show-value属性，所以这两个slider组件可以在右侧显示当前的值。

<view style="margin:20px">
      <view style="margin:20px">
        <text style="margin:15px">设置step</text>
        <slider value="60" bindchange="slider1change" step="5" />
      </view>
      <view style="margin:20px">
        <text style="margin:15px">显示当前value</text>
        <slider value="50" bindchange="slider2change" show-value/>
      </view>
      <view style="margin:20px">
        <text style="margin:15px">设置最小/最大值</text>
        <slider value="100" bindchange="slider3change" min="50" max="200" show-value/>
      </view>
    </view>

布局的效果如图1所示。

![format_png][]

图1  slider组件

完整的JavaScript实现代码如下：

这段代码通过循环，动态生成了3个事件函数（slider1change、slider2change和slider3change），当滑动slider组件的滑杆时，会在Console中输出如图2所示的日志信息。

![format_png 1][]

图2  滑动slider滑杆时在Console的输出结果

**2. form组件**

form组件用于提交用户的输入的内容（通过switch、input、checkbox、slider等组件输入），待提交的组件必须在form组件内部。这里的提交，实际上是当点击formType属性为submit的button组件时，将录入的信息提交给一个函数，通过该函数的参数可以获取用户提交的内容，每一部分内容需要用待提交组件的name属性值作为key。form组件还可以通过点击formType属性值为reset的button组件将录入的内容重置。

form组件有如下几个属性。

*  report-submit：Boolean类型，是否返回formId用于发送模板消息
 *  bindsubmit：EventHandle类型，指定提交触发的函数名称，通过event.detail.value可获得提交的内容
 *  bindreset：EventHandle类型，指定重置触发的函数名，该函数的参数不能通过event.detail.value获取提交的内容（value未定义），只能通过event.detail获取form组件本身

下面的布局文件演示了form组件的使用方法。

<view style="margin:30px">
      <form catchsubmit="formSubmit" catchreset="formReset">
        <switch name="switch" checked="true" />
        <slider style="margin-top:20px" name="slider" show-value></slider>
        <input style="margin-top:20px" name="input" placeholder="please input here" />
        <radio-group style="margin-top:20px" name="radio-group">
          <label>
            <radio value="radio1" />radio1</label>
          <label>
            <radio value="radio2" />radio2</label>
        </radio-group>
        <view style="margin-top:20px">
          <checkbox-group name="checkbox">
            <label>
              <checkbox value="checkbox1" />checkbox1</label>
            <label>
              <checkbox value="checkbox2" />checkbox2</label>
          </checkbox-group>
        </view>
        <view style="margin-top:20px">
          <button formType="submit">Submit</button>
          <button formType="reset" style="margin-top:20px">Reset</button>
        </view>
      </form>
    </view>

装载该布局文件后，将窗口的组件设置一定的值，如图3所示。

![format_png 2][]

图3  form的显示效果

要注意的是，如果要用form提交，checkbox组件必须包含在checkbox-group组件中，而且checkbox-group必须指定name属性，否则无法通过submit事件的参数获得checkbox提交的值。

完整的JavaScript实现代码如下：

Page({
      formSubmit: function(e) {
        console.log('form发生了submit事件，携带数据为：', e.detail.value)
      },
      formReset: function(e) {
        console.log('form发生了reset事件，携带数据为：', e.detail)
      }
    })

现在点击Submit按钮，然后点击Reset按钮，会看到Console中输出如图4所示的日志信息。其中checkbox组件返回了一个数组，本例只选中一个checkbox组件，所以数组长度为1，数组元素值为checkbox1（value属性的值）。

![format_png 3][]

图4  提交和重置后输出的日志信息

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 4][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 5][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9VT2ljQmljZDl4dG4wcDFOeWMyZ1gwTHdDN292WWlhaWNrbENhV29QWUdYM1dkcGN2d2liR0s5ZkVFOVdEQmlhQUZYTXpjdnBXTTR1d0Q5MjlqYmc4MDhOT2lhRWcvNjQw?x-oss-process=image/format,png
[format_png 1]: /images/20230209/297af452fba94cb9b608e6564a95c08b.png
[format_png 2]: /images/20230209/bcded2a9e95d438fb551b501fa8c90e3.png
[format_png 3]: /images/20230209/ef43e05a67704d52ba40c0e2a6626de0.png
[format_png 4]: /images/20230209/f70d4dc48f0647c1bbabfd2e74ce0bbe.png
[format_png 5]: /images/20230209/f4c88222820340a2beff89c61fd09022.png