您现在的位置是:网站首页>>微信>>微信小程序

微信小程序组件——表单组件

发布时间:2019-08-07 18:11:16作者:wangjian浏览量:44点赞量:0

    一:button按钮

    button组件属性:

    size:按钮的大小,默认为default,可选参数defaul(默认大小),mini(小尺寸)

    type:按钮的样式类型,默认为default,可选参数:primary(绿色),default(白色),warn(红色)

    plain:按钮是否镂空,背景色透明,默认为false

    disabled:是否禁用,默认为false

    loading:名称前是否带 loading 图标,默认为false

    form-type:用于 form 组件,可选参数为:submit(提交表单),reset(重置表单  )点击分别会触发 form 组件的submit/reset

    open-type:微信开放能力,常用参数为:getPhoneNumber(获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息),getUserInfo(获取用户信息,可以从bindgetuserinfo回调中获取到用户信息)

    hover-class:指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果,默认为button-hover

    hover-stop-propagation:指定是否阻止本节点的祖先节点出现点击态,默认为false

    hover-start-time:按住后多久出现点击态,单位毫秒,默认为20

    hover-stay-time:手指松开后点击态保留时间,单位毫秒,默认为70

    lang:指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文,默认为en

    bindgetuserinfo:用户点击该按钮时,会返回获取到的用户信息,open-type="getUserInfo"时有效

    bindgetphonenumber:获取用户手机号回调,open-type=getPhoneNumber时有效

    例:

    <!-- wxml -->
    <view  wx:for="{{types}}">
    <button 
    type="{{item}}" 
    size="{{warnSize}}" 
    loading="{{loading}}" 
    plain="{{plain}}" 
    disabled="{{disabled}}" 
    bindtap="{{item}}"
    > {{item}} </button>
    </view>
    <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="userInfo">获取用户信息</button>
    <button open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="phoneNumber">获取用户手机号</button>

    Page({
    data: {
    disabled: false,//设置是否禁用
    plain: false,//设置是否镂空
    loading: false,//设置名称前是否加loading
    types: ['default', 'primary', 'warn']
    },
    userInfo: function (e) {
    //授权获取用户信息
    console.log(e.detail)
    },
    phoneNumber: function (e) {
    //授权获取用户手机
    console.log(e.detail)
    },
    })

    现象如下:

    image.png

    二:多选框(checkbox + checkbox-group)

    checkbox组件属性:

    value:checkbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value

    disabled:是否禁用,默认为false

    checked:当前是否选中,默认为false

    color:checkbox的颜色,默认为#09BB07

    checkbox-group组件属性:

    bindchange:checkbox-group中选中项发生改变时触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

    例:

    <!-- wxml -->
    <checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
    </label>
    </checkbox-group>
    // js
    Page({
    data: {
    items: [
    {name: 'USA', value: '美国'},
    {name: 'CHN', value: '中国', checked: 'true'},
    {name: 'BRA', value: '巴西'},
    {name: 'JPN', value: '日本'},
    {name: 'ENG', value: '英国'},
    {name: 'TUR', value: '法国'},
    ]
    },
    checkboxChange: function(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
    }
    })

    现象如下:

    image.png

    三:form表单组件

    form组件属性:

    report-submit:是否返回 formId 用于发送模板消息,默认为false

    report-submit-timeout:等待一段时间(毫秒数)以确认 formId 是否生效,如果失败,将返回 requestFormId:fail 开头的 formId 

    bindsubmit:携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''} 

    bindreset:表单重置时会触发 reset 事件 

    例:

    <form bindsubmit="formSubmit" bindreset="formReset">
    <view>
    <input name="input" placeholder="请输入" />
    </view>
    <view>
    <button form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
    </view>
    </form>
    Page({
    formSubmit: function (e) {
    console.log('form发生了submit事件,携带数据为:', e.detail.value)
    },
    formReset: function () {
    console.log('form发生了reset事件')
    }
    })

    四:input组件

    input属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/input.html

    例:

    <!--input.wxml-->
    <view class="section">
    <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
    </view>
    <view class="section">
    <input password type="text"  placeholder="这是一个密码输入框"/>
    </view>

    五:滚动选择器

    1:picker选择器属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

    例:

    <!--wxml-->
    <view class="section">
    <view class="section__title">普通选择器</view>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
    当前选择:{{array[index]}}
    </view>
    </picker>
    </view>
    <view class="section">
    <view class="section__title">多列选择器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
    当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </view>
    </picker>
    </view>
    <view class="section">
    <view class="section__title">时间选择器</view>
    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
    当前选择: {{time}}
    </view>
    </picker>
    </view>
    <view class="section">
    <view class="section__title">日期选择器</view>
    <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
    <view class="picker">
    当前选择: {{date}}
    </view>
    </picker>
    </view>
    <view class="section">
    <view class="section__title">省市区选择器</view>
    <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
    当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
    </picker>
    </view>

    Page({
    data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
    {
    id: 0,
    name: '美国'
    },
    {
    id: 1,
    name: '中国'
    },
    {
    id: 2,
    name: '巴西'
    },
    {
    id: 3,
    name: '日本'
    }
    ],
    index: 0,
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    objectMultiArray: [
    [
    {
    id: 0,
    name: '无脊柱动物'
    },
    {
    id: 1,
    name: '脊柱动物'
    }
    ], [
    {
    id: 0,
    name: '扁性动物'
    },
    {
    id: 1,
    name: '线形动物'
    },
    {
    id: 2,
    name: '环节动物'
    },
    {
    id: 3,
    name: '软体动物'
    },
    {
    id: 3,
    name: '节肢动物'
    }
    ], [
    {
    id: 0,
    name: '猪肉绦虫'
    },
    {
    id: 1,
    name: '吸血虫'
    }
    ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
    },
    bindPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    index: e.detail.value
    })
    },
    bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    multiIndex: e.detail.value
    })
    },
    bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
    multiArray: this.data.multiArray,
    multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
    case 0:
    switch (data.multiIndex[0]) {
    case 0:
    data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
    break;
    case 1:
    data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
    data.multiArray[2] = ['鲫鱼', '带鱼'];
    break;
    }
    data.multiIndex[1] = 0;
    data.multiIndex[2] = 0;
    break;
    case 1:
    switch (data.multiIndex[0]) {
    case 0:
    switch (data.multiIndex[1]) {
    case 0:
    data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
    break;
    case 1:
    data.multiArray[2] = ['蛔虫'];
    break;
    case 2:
    data.multiArray[2] = ['蚂蚁', '蚂蟥'];
    break;
    case 3:
    data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
    break;
    case 4:
    data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
    break;
    }
    break;
    case 1:
    switch (data.multiIndex[1]) {
    case 0:
    data.multiArray[2] = ['鲫鱼', '带鱼'];
    break;
    case 1:
    data.multiArray[2] = ['青蛙', '娃娃鱼'];
    break;
    case 2:
    data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
    break;
    }
    break;
    }
    data.multiIndex[2] = 0;
    break;
    }
    console.log(data.multiIndex);
    this.setData(data);
    },
    bindDateChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    date: e.detail.value
    })
    },
    bindTimeChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    time: e.detail.value
    })
    },
    bindRegionChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    region: e.detail.value
    })
    }
    })

    六:slider滑动选择器

    slider属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

    例:

    <!--wxml-->
    <view class="section section_gap">
      <text class="section__title">显示当前value</text>
      <view class="body-view">
        <slider 
        bindchange="sliderchange" //完成一次拖动后触发的事件
        show-value //显示当前数据
        step="5" //步长,取值必须大于 0,并且可被(max - min)整除
        min="0" //最小值
        max="200"//最大值
        />
      </view>
    </view>
    //js
    Page({
    sliderchange(e) {
    console.log('slider' + 'index' + '发生 change 事件,携带值为', e.detail.value)
    }
    })

    现象如下:

    image.png

    七:switch开关组件

    switch属性参考:https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

    例:

    <!-- wxml -->
    <view class="body-view">
    <switch checked bindchange="switch1Change"/>
    <switch bindchange="switch2Change"/>
    </view>

    // js
    Page({
    switch1Change: function (e) {
    console.log('switch1 发生 change 事件,携带值为', e.detail.value)
    },
    switch2Change: function (e) {
    console.log('switch2 发生 change 事件,携带值为', e.detail.value)
    }
    })

    现象如下:

    image.png



0 +1