微信小程序 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 相关文章推荐
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
Javascript中的arguments对象
Jun 20 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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代码包装修正版
2008/03/15 PHP
生成php程序的php代码
2008/04/07 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
smarty中js的调用方法示例
2014/10/27 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
pycharm实现猜数游戏
2020/12/07 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
喋血孤城观后感
2015/06/08 职场文书
工作年限证明模板
2015/06/15 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript