位置:电子教程 > 小程序Weui在线教程 (如果看不到内容请使用360浏览器) 推荐学习资源
WEUI在微信小程序中的使用
项目框架的制作
栏目首页
weui基础组件
weui表单
weui 操作反馈相关
weui 导航 navbar 切换(类tab)使用教程
weui 搜索searchbar使用教程
当前阅读教程:小程序Weui在线教程 > weui表单 input表单输入使用教程
阅读(22555525)      收藏       赞(5685)      分享
上一篇: weui表单 LIst列表使用教程 下一篇: weui表单 slider滑块使用教程

image.png

image.png

image.png

js代码

// pages/02biaodan/03-input.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    showTopTips: false,
    radioItems: [
      { name: 'cell standard', value: '0' },
      { name: 'cell standard', value: '1', checked: true }
    ],
    checkboxItems: [
      { name: 'standard is dealt for u.', value: '0', checked: true },
      { name: 'standard is dealicient for u.', value: '1' }
    ],
    date: "2016-09-01",
    time: "12:01",
    countryCodes: ["+86", "+80", "+84", "+87"],
    countryCodeIndex: 0,
    countries: ["中国", "美国", "英国"],
    countryIndex: 0,
    accounts: ["微信号", "QQ", "Email"],
    accountIndex: 0,
    isAgree: false
  },
  showTopTips: function () {
    var that = this;
    this.setData({
      showTopTips: true
    });
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 3000);
  },
  radioChange: function (e) {
    console.log('radio发生change事件,携带value值为:', e.detail.value);
    var radioItems = this.data.radioItems;
    for (var i = 0, len = radioItems.length; i < len; ++i) {
      radioItems[i].checked = radioItems[i].value == e.detail.value;
    }
    this.setData({
      radioItems: radioItems
    });
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value);
    var checkboxItems = this.data.checkboxItems, values = e.detail.value;
    for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
      checkboxItems[i].checked = false;
      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (checkboxItems[i].value == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }
    this.setData({
      checkboxItems: checkboxItems
    });
  },
  bindDateChange: function (e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    this.setData({
      time: e.detail.value
    })
  },
  bindCountryCodeChange: function (e) {
    console.log('picker country code 发生选择改变,携带值为', e.detail.value);
    this.setData({
      countryCodeIndex: e.detail.value
    })
  },
  bindCountryChange: function (e) {
    console.log('picker country 发生选择改变,携带值为', e.detail.value);
    this.setData({
      countryIndex: e.detail.value
    })
  },
  bindAccountChange: function (e) {
    console.log('picker account 发生选择改变,携带值为', e.detail.value);
    this.setData({
      accountIndex: e.detail.value
    })
  },
  bindAgreeChange: function (e) {
    this.setData({
      isAgree: !!e.detail.value.length
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

wxml代码

<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
    <view class="page__hd">
        <view class="page__title">Input</view>
        <view class="page__desc">表单输入</view>
    </view>
    <view class="page__bd">
        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>
        <view class="weui-cells__title">单选列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <radio-group bindchange="radioChange">
                <label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
                    <radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
                    <view class="weui-cell__bd">{{item.name}}</view>
                    <view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
                        <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
                    </view>
                </label>
            </radio-group>
            <view class="weui-cell weui-cell_link">
                <view class="weui-cell__bd">添加更多</view>
            </view>
        </view>
        <view class="weui-cells__title">复选列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <checkbox-group bindchange="checkboxChange">
                <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                    <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
                    <view class="weui-cell__hd weui-check__hd_in-checkbox">
                        <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
                        <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
                    </view>
                    <view class="weui-cell__bd">{{item.name}}</view>
                </label>
            </checkbox-group>
            <view class="weui-cell weui-cell_link">
                <view class="weui-cell__bd">添加更多</view>
            </view>
        </view>
        <view class="weui-cells__title">表单</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">qq</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入qq"/>
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入手机号" />
                </view>
                <view class="weui-cell__ft">
                    <view class="weui-vcode-btn">获取验证码</view>
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">日期</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                        <view class="weui-input">{{date}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">时间</view>
                </view>
                <view class="weui-cell__bd">
                    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
                        <view class="weui-input">{{time}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">验证码</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入验证码" />
                </view>
                <view class="weui-cell__ft">
                    <image class="weui-vcode-img" src="/images/vcode.jpg" style="width: 108px"></image>
                </view>
            </view>
        </view>
        <view class="weui-cells__tips">底部说明文字底部说明文字</view>
        <view class="weui-cells__title">表单报错</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input weui-cell_warn">
                <view class="weui-cell__hd">
                    <view class="weui-label">卡号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入卡号"/>
                </view>
                <view class="weui-cell__ft">
                    <icon type="warn" size="23" color="#E64340"></icon>
                </view>
            </view>
        </view>
        <view class="weui-cells__title">开关</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">标题文字</view>
                <view class="weui-cell__ft">
                    <switch checked />
                </view>
            </view>
        </view>
        <view class="weui-cells__title">文本框</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入文本" />
                </view>
            </view>
        </view>
        <view class="weui-cells__title">文本域</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
                    <view class="weui-textarea-counter">0/200</view>
                </view>
            </view>
        </view>
        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__hd" style="width: 105px">
                    <picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
                        <view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
                    </picker>
                </view>
                <view class="weui-cell__bd weui-cell__bd_in-select-before">
                    <input class="weui-input" placeholder="请输入号码" />
                </view>
            </view>
        </view>
        <view class="weui-cells__title">选择</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__bd">
                    <picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
                        <view class="weui-select">{{accounts[accountIndex]}}</view>
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_select">
                <view class="weui-cell__hd weui-cell__hd_in-select-after">
                    <view class="weui-label">国家/地区</view>
                </view>
                <view class="weui-cell__bd">
                    <picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
                        <view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
                    </picker>
                </view>
            </view>
        </view>
        <checkbox-group bindchange="bindAgreeChange">
            <label class="weui-agree" for="weuiAgree">
                <view class="weui-agree__text">
                    <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
                    <view class="weui-agree__checkbox-icon">
                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>
                    阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
                </view>
            </label>
        </checkbox-group>
        <view class="weui-btn-area">
            <button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
        </view>
    </view>
</view>


上一篇: weui表单 LIst列表使用教程 下一篇: weui表单 slider滑块使用教程
毕业设计网             广告联系QQ:45157718(微信同号)