微信小程序示例 - 表单

滚动选择器 picker

代码结构

// wxml
<picker bindchange="bindChange" value="{{index}}" range="{{array}}">
      当前选择:{{array[index]}}
</picker>

// js
Page({
    data: {
        array: ['美国', '中国', '巴西'],
        index: 0
    },
    bindPickerChange: function(e) {
        console.log('picker 值为:', e.detail.value)
        this.setData({
          index: e.detail.value
        })
    }
})

多选 checkbox

代码结构

<checkbox-group>中包含多项<checkbox>

<checkbox-group>
    <checkbox value="" checked=""/>name
    ...
</checkbox-group>

<checkbox-group>中可以绑定change事件

// wxml
<checkbox-group bindchange="checkboxChange">
...
</checkbox-group>

// js
checkboxChange: function(e) {
    console.log('value:', e.detail.value)
}

滑动选择器 slider

代码结构

<slider bindchange="sliderchange" step="5" min="50" max="200" show-value/>

sliderchange:function(e) {
  console.log('slider 值为', e.detail.value)
}

开关选择器 switch

代码结构

<switch checked="{{isChecked}}" bindchange="switchChange"/>

switchChange: function (e){
    console.log('switch值为', e.detail.value)
}

表单提交

使用form组件,其中放入各类表单组件,然后使用submit类型的button触发提交事件,处理函数中可以得到所有的表单数据

示例代码

// wxml
<form bindsubmit="formSubmit">
  <switch name="switch"/>
  <slider name="slider"></slider>
  <button formType="submit">Submit</button>
</form>

// js
formSubmit: function(e) {
    console.log('提交的所有数据:', e.detail.value)
}

源码下载

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-10-11

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)

1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 ------------------------------------------...

4264
来自专栏前端小叙

页面加载中jquery逐渐消失效果实现

为了获得更好的用户体验,现在大多数网页都会在页面中加一个加载中效果,这里实现一个加载中逐渐消失的效果,以至于看上去不那么生硬。 html: <div id="l...

4539
来自专栏Pythonista

html基础

HTML 不是一种编程语言,而是一种标记语言 (markup language) HTML 使用标记标签来描述网页

1412
来自专栏Android-薛之涛

Android - 自定义View,实现不一样的输入框

最近看到一个效果,就是在登陆界面输入账号密码的时候,会有一个动画效果,感觉不错,找了一些资料,学习了一下。已经实现效果,效果如下:

3502
来自专栏章鱼的慢慢技术路

3ds Max 中的导航控件ViewCube入门介绍

1605
来自专栏源哥的专栏

HTML中实现右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现...

2703
来自专栏IMWeb前端团队

用css3简单的制作3d半透明立方体图片展示

? 以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动...

2975
来自专栏HTML5学堂

iframe基本知识及iframe版本Tab切换

HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前...

3584
来自专栏程序员宝库

Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

4858
来自专栏KaliArch

搭建高可用MongoDB集群(Replica set)

MongoDB基础可参考http://blog.51cto.com/kaliarch/2044423

2.4K10

扫码关注云+社区

领取腾讯云代金券