微信小程序 input表单与redio及下拉列表的使用实例


Posted in Javascript onSeptember 20, 2017

微信小程序 input表单与redio及下拉列表的使用实例

一个简单的预约类型的表单,效果

微信小程序 input表单与redio及下拉列表的使用实例

主要代码:

<form bindsubmit="bindSave">
   <view class="form-box">
    <view class="row-wrap">
     <view class="label">联系人</view>
     <view class="label-right">
      <input name="userName" class="input" type="text" placeholder="姓名" value="{{addressData.userName}}" />
     </view>
    </view>

    <view class="row-wrap">
     <view class="label">性别</view>
     <radio-group class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{items}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
      </label>
     </radio-group>

    </view>
    <view class="row-wrap">
     <view class="label">手机号码</view>
     <view class="label-right">
      <input name="mobile" class="input" maxlength="11" type="number" placeholder="11位手机号码" value="{{addressData.mobile}}" />
     </view>
    </view>

    <view class="row-wrap">
     <view class="label">预约项目</view>
     <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
      <view>
       <text>{{casArray[casIndex]}}</text>
      </view>
     </picker>


    </view>

   </view>

   <view class="btn-tyc">

    <button size="mini" bindtap="tapAddCart" class="submit" type="primary" formType="submit">提交预约</button>
   </view>

   <button size="mini" bindtap="tlp_phone" class="phone" type="primary">拨打电话</button>
  </form>

.js文件

data: {
  nickName: "",
  avatarUrl: "",
  casArray: ['双眼皮', 'TBM', '隆胸', '减肥', 'qita'],
  userName: '',
  mobile: '',
  Gender: 'female',
  casIndex: 0,
  items: [
   { name: 'male', value: '男' },
   { name: 'female', value: '女', checked: 'true' },
  ]
 },
 radioChange: function (e) {
  console.log('值:', e.detail.value)
  this.setData({
   Gender: e.detail.value
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 bindCasPickerChange: function (e) {
  console.log(this.data.casArray);
  console.log('下拉选择的是', this.data.casArray[e.detail.value])
  this.setData({
   casIndex: e.detail.value
  })
 },

具体的表单样式可以自己调整,wxss样式文件代码不写了

参照官方文档form组件

https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue获取form表单的值示例
Oct 29 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 #Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 #Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 #Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 #Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php 中的closure用法详解
2017/06/12 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python指定写入文件时的编码格式方法
2018/06/07 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
利用python 读写csv文件
2020/09/10 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
护理毕业生自荐信范文
2013/12/22 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
开场白怎么写
2015/06/01 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫