这篇文章主要介绍了微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

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

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

主要代码:

  <form bindsubmit="bindSave">
   <view>
    <view>
     <view>联系人</view>
     <view>
      <input name="userName" type="text" value="{{addressData.userName}}" />
     </view>
    </view>

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

    </view>
    <view>
     <view>手机号码</view>
     <view>
      <input name="mobile" maxlength="11" type="number" value="{{addressData.mobile}}" />
     </view>
    </view>

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


    </view>

   </view>

   <view>

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

   <button size="mini" bindtap="tlp_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

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

最新资讯
虾米音乐,阿里大文娱倒下的第一名战士

虾米音乐,阿里大文娱倒

虾米音乐被一个并不知是否真实的解散消息,在11月的最后
小黄车戴威再收限制消费令 你的押金退了吗?

小黄车戴威再收限制消

天眼查App显示,近日,OFO小黄车的关联公司北京拜克洛克科
罗永浩上市梦突然告吹!还有2亿债务怎么还?

罗永浩上市梦突然告吹

直播新规的临门一脚,刺破了星空野望“借壳上市”这场迅
欧盟计划大力推行电动汽车 2030年底至少3000万辆上路

欧盟计划大力推行电动

外媒最新的报道显示,欧盟已经制订了一项大力推行电动汽
暴力驱逐租客?诱导使用租金贷?这6地说NO!

暴力驱逐租客?诱导使用

如何确保超2亿租客顺利租到“放心房”,成为多地监管部
理想汽车将增发股份募集13.6亿美元

理想汽车将增发股份募

据报道,知情人士称理想汽车把增发4,700万股美国存托股
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,