专栏首页极客起源微信小程序开发实战(12):滑杆组件(slider)和form组件

微信小程序开发实战(12):滑杆组件(slider)和form组件

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所示。

图1 slider组件

完整的JavaScript实现代码如下:

var pageData = {}for(var i = 1; i < 4; ++i) {  (function (index) {    pageData[`slider${index}change`] = function(e) {      console.log(`slider${index}发生change事件,携带值为`, e.detail.value)    }  })(i);}Page(pageData)

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

图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所示。

图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属性的值)。

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

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序开发实战(5):组件复用利器-模板

    根据我们前面讲解的知识,很容易看出,这段布局代码的作用是绘制两行带背景色的方块,效果如图1所示。

    蒙娜丽宁
  • 小程序开发实战(6):基础组件(text、icon和progress)

    小程序在有很多组件,其中基础组件用来显示一些静态的信息,也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。

    蒙娜丽宁
  • 微信小程序开发实战(11):滚动组件(picker)

    picker组件用于从列表中选择一个item,效果有点像iOS的ActionSheet,从窗口的底部弹出,选择一个item后关闭。picker可用于选择普通的i...

    蒙娜丽宁
  • 人工智能拥有意识,仅是一个时间问题而已

    从能干家务还能当秘书的“保姆机器人”到AlphaGo打败围棋世界冠军,人工智能机器人一次又一次的刷新着人类的三观,它们正在快速地发展,并且具备越来越高的智能。目...

    企鹅号小编
  • 起步 - 从场景中看父子组件间通信

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互。 在vue中,父子组件的关系可以总结为props down,ev...

    okaychen
  • [译] 更可靠的 React 组件:清楚易懂的可表达性

    原文摘自:https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-c...

    江米小枣
  • css基础

        行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

    超蛋lhy
  • springmvc之使用@RequestParam绑定请求参数

    说明:可以使用RequestParam注解来传递前端请求传过来的参数,value表示传过来的参数名,required表示是否必须,defaultValue表示默...

    绝命生
  • 如何管理好IDC机房?(三) ----机房管理中的文档及文档管理

    这个不难理解,文档是管理好机房比不可少的,良好的文档就是机房良好运行的体现。个人认为,判断机房文档管理好坏的标准就是,如果机房的所有管理人员全部离开,来了一批新...

    力哥聊运维与云计算
  • Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

    前言   前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分;   Node.js提供了http模块,这个模块中提供了一些底层接口,可...

    Porschev

扫码关注云+社区

领取腾讯云代金券