微信小程序input表單頁面實例,redio和(hé)下(xià)拉列表獲取數據 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序input表單頁面實例,redio和(hé)下(xià)拉列表獲取數據

發表時間:2021-4-30

發布人:葵宇科技

浏覽次數:61

  • 一個(gè)簡單的預約類型的表單,效果 
    這裡寫圖片描述

  • 主要代碼:
    <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

  • .js文(wén)件
  data: {
    nickName: "",
    avatarUrl: "",
    casArray: ['雙眼皮', 'TBM', '隆胸', '減肥', 'qita'],
    userName: '',
    mobile: '',
    Gender: 'female',
    casIndex: 0,
    items: [
      { name: 'male', value: '男(nán)' },
      { 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('下(xià)拉選擇的是', this.data.casArray[e.detail.value])
    this.setData({
      casIndex: e.detail.value
    })
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

  • 具體的表單樣式可(kě)以自己調整,wxss樣式文(wén)件代碼不寫了

  • 參照官方文(wén)檔form組件

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

相關(guān)案例查看更多