Detailed explanation of WeChat applet input form, redo and drop-down list examples

小云云
Release: 2018-02-05 11:10:55
Original
2872 people have browsed it

This article mainly introduces to you the relevant information about the use cases of the input form, redo and drop-down list of the WeChat applet. I hope this article can help you. Friends in need can refer to it. I hope it can help you.

Usage example of WeChat applet input form, redio and drop-down list

A simple reservation type form, the effect

Main code:


  <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>
Copy after login

.js file


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

The specific form style can be adjusted by yourself. The wxss style file code is not written.

Refer to the official document form component

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

Related recommendations:

How to upload files in the input form

The above is the detailed content of Detailed explanation of WeChat applet input form, redo and drop-down list examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!