微信小程序_表单组件

最新推荐文章于 2024-05-03 23:01:30 发布
最新推荐文章于 2024-05-03 23:01:30 发布
阅读量478 收藏 1
点赞数 1
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOVEcao_YU/article/details/133485366
版权

#表单组件#

>button按钮

        >button按钮组件提供3种类型按钮（type属性）：

                >基本类型

                >默认类型

                >警告类型

        >提供两种大小形状的按钮（size属性）：

                >默认

                >mini

按钮属性
属性类型默认值说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空，背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring用于form组件，点击分别会触发组件的 submit/reset 事件
hover-classstringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-timenumber20按住后多久出现点击态，单位毫秒
hover-stay-timenumber70手指松开后点击态保留时间，单位毫秒

        示例代码：

//.wxml
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>

<button type="primary" size="{{primarySize}}" loading="{{loading}}" 
plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> primary 
</button>

<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" 
disabled="{{disabled}}" bindtap="warn"> warn </button>

<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGetUserInfo">获取用户信息</button>
<button open-type="openSetting">打开授权设置页</button>

//.js


var types = ['default', 'primary', 'warn']

var pageObject = {
        data: {
            defaultSize: 'default',
            primarySize: 'default',
            warnSize: 'default',
            disabled: false,
            plain: false,
            loading: false
        },
        setDisabled: function (e) {
            this.setData({
            disabled: !this.data.disabled
            })
        },
        setPlain: function (e) {
            this.setData({
            plain: !this.data.plain
            })
        },
        setLoading: function (e) {
            this.setData({
            loading: !this.data.loading
            })
        },
        onGetUserInfo: function (e) {
            console.log(e.detail.errMsg)
            console.log(e.detail.userInfo)
            console.log(e.detail.rawData)
        }
}

for (var i = 0; i < types.length; ++i) {
        (function (type) {
            pageObject[type] = function (e) {
                var key = type + 'Size'
                var changedData = {}
                changedData[key] =this.data[key] === 'default' ? 'mini' :'default'
                this.setData(changedData)
            }
        })(types[i])
}

Page(pageObject)

        效果截图：

 

                                 注：自行单击测试效果。

>checkbox多项选择器

        >该组件就是我们常说的复选框，用来进行多项选择

        >checkbox-group是用来容纳多个checkbox的容器

                >它有一个绑定事件bindchange

                ><checkbox-group/>中选中项发生改变时触发change事件

                >detail={ value:[选中的checkbox的value的数组]}

多项选择器属性
属性类型默认值说明
valuestringcheckbox标识，选中时触发 checkbox-group的 change 事件， 并携带 checkbox的 value
disabledbooleanfalse是否禁用
checkedbooleanfalse当前是否选中，可用来设置默认选 中
colorcolor#09BB07checkbox的颜色，同css的color

         示例代码：

//.wxml
<view>
    <checkbox-group bindchange="checkboxChange">
        <label class="checkbox" wx:for="{{items}}">
            <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
        </label>
    </checkbox-group> 
</view>

//.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)
        }
)}

        效果截图：

 

>radio单项选择器

        >该组件是与checkbox对立的一个组件

        >每次只能选中一个选项

        >选项间是一种互斥关系

        >radio-group是用来容纳多个radio的容器

                >它有一个绑定事件bindchange

                ><radio-group/>>中的选中项发生变化时触发 bindchange事件

                >event.detail={value:选中的radio的value}

单项选择器属性
属性类型默认值说明
valuestringradio标识，当该radio选中时， radio-group的 change 事件会携 带 radio的 value
disabledbooleanfalse是否禁用
checkedbooleanfalse当前是否选中，可用来设置默认选中
colorcolor#09BB07checkbox的颜色，同css的color

         示例代码：

//.wxml
<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>

//.js
Page{(
    data:{
        items: [
            { name: 'USA', value: '美国' },
            { name: 'CHN', value: '中国',checked: 'true' },
            { name: 'BRA', value: '巴西' },
            { name: 'JPN', value: '日本' },
            { name: 'ENG', value: '英国' },
            { name: 'TUR', value: '法国' },
            ]
        }
    },
        radioChange: function (e) {
        console.log('radio发生change事件，携带value值为：', e.detail.value)
        }
)}

>input单行输入框

        >用来输入单行文本内容

        >input类型有（type属性）：text、number、idcard、digit

        >3个常用事件：输入时(bindinput)、光标聚焦时(bindfocus)、光标离开时(bindblur)

input属性
属性类型默认值说明
valuestring输入框的初始内容
typestringtextinput 的类型
passwordbooleanfalse是否是密码类型
placeholderstring输入框为空时占位符
placeholder-stylestring指定 placeholder 的样式
placeholder-classstringinput-placeholder指定 placeholder 的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacingnumber0指定光标与键盘的距离，取 input 距离底部的距 离和 cursor-spacing 指定的距离的最小值作为光 标与键盘的距离
focusbooleanfalse获取焦点
bindinputeventhandle键盘输入时触发，event.detail = {value:value}， 处理函数可以直接 return 一个字符串，将替换输 入框的内容。
bindfocuseventhandle输入框聚焦时触发，event.detail = { value: value }
bindblureventhandle输入框失去焦点时触发，event.detail = {value: value}
bindconfirmeventhandle点击完成按钮时触发，event.detail = {value: value}

        示例代码：

//.wxml
<view>
    <view class="section">
        <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
    </view>

    <view class="section">
        <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
        <view class="btn-area">
            <button bindtap="bindButtonTap">使得输入框获取焦点</button>
        </view>
    </view>

    <view class="section">
        <input maxlength="10" placeholder="最大输入长度10" />
    </view>

    <view class="section">
        <view class="section__title">你输入的是：{{inputValue}}</view>
            <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
    </view>

    <view class="section">
        <input placeholder="这是一个可以自动聚焦的input" focus="true"/>
    </view>
</view>

//.js
Page({
    data:{
        focus: false,
        inputValue: ''
    },
    bindButtonTap: function () {
            this.setData({
                focus: true
            })
    },
    bindKeyInput: function (e) {
            this.setData({
                inputValue: e.detail.value
            })
    },
    bindReplaceInput: function (e) {
            var value = e.detail.value
            var pos = e.detail.cursor
            if (pos != -1) {
                var left = e.detail.value.slice(0, pos) //光标在中间
                pos = left.replace(/11/g, '2').length //计算光标的位置
            }
            return {
                value: value.replace(/11/g, '2'),
                cursor: pos 
            }
    }
})

        效果截图：

>picker滚动选择器

        >从底部弹起的滚动选择器

        >支持5种滚动选择器：普通选择器、多列选择器、时间选择器、日期选择器 、省市区选择器

普通选择器属性(mode=selector)
属性类型默认值说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器 显示内容
valuenumber0表示选择了 range 中的第几个 （下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件， event.detail = {value}
多列选择器属性(mode=multiSelector)
属性类型默认值说明
rangearray/object array[]mode 为 selector 或 multiSelector 时，range 有效
range-keystring当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器 显示内容
valuenumber0表示选择了 range 中的第几个 （下标从 0 开始）
bindchangeeventhandlevalue 改变时触发 change 事件， event.detail = {value}
bindcolu mnchangeeventhandle列改变时触发
时间选择器属性(mode=time)
属性类型说明
valuestring表示选中的时间，格式为"hh:mm"
startstring表示有效时间范围的开始，字符串格式为 "hh:mm"
endstring表示有效时间范围的结束，字符串格式为 "hh:mm"
bindchangeeventhandlevalue 改变时触发 change 事件， event.detail = {value}
日期选择器属性(mode=date)
属性类型默认值说明
valuestring0表示选中的日期，格式为"YYYY-MM-DD"
startstring表示有效日期范围的开始，字符串格式为 "YYYY-MM-DD"
endstring表示有效日期范围的结束，字符串格式为 "YYYY-MM-DD"
fieldsstringday有效值 year,month,day，表示选择器的 粒度
bindchangeeventhandlevalue 改变时触发 change 事件， event.detail = {value}
省市区选择器属性(mode=region)
属性类型默认值说明
valuearray[]表示选中的省市区，默认选中每一 列的第一个值
custom-itemstring可为每一列的顶部添加一个自定义 的项
bindchangeeventhandlevalue 改变时触发 change 事件， event.detail = {value, code, postcode}，其中字段 code 是统计 用区划代码，postcode 是邮政编码

        示例代码：

//.wxml

<view>
    <view class="section">
        <view class="section__title">普通选择器</view>
            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
                <view class="picker">当前选择：{{array[index]}}</view>
            </picker>
    </view>
    <text>\n</text>
    <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>
    <text>\n</text>
    <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>
    <text>\n</text>
    <view class="section">
        <view class="section__title">日期选择器</view>
        <!--  start="2000-01-01" end="2023-10-02" -->
            <picker mode="date" value="{{date}}" end="2023-10-02" bindchange="bindDateChange">
                <view class="picker">当前选择: {{date}}</view>
            </picker>
    </view>
    <text>\n</text>
    <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>
</view>

//.js

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: 4,
                name: '节肢动物'
            }
            ], 
            [
            {
                id: 0,
                name: '猪肉绦虫'
            },
            {
                id: 1,
                name: '吸血虫'
            }
            ]
        ],
        multiIndex: [0, 0, 0],
        date: '2023-10-02',
        time: '12:15',
        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滑动选择器属性
属性类型默认值说明
minnumber0最小值
maxnumber100最大值
stepnumber1步长，取值必须大于 0，并且可被(max - min) 整除
disabledbooleanfalse是否禁用
valuenumber0当前取值
colorcolor#e9e9e9背景条的颜色（请使用 backgroundColor）
selected-colorcolor#1aad19已选择的颜色（请使用 activeColor）
show-valuebooleanfalse是否显示当前 value
bindchangeeventhandle完成一次拖动后触发的事件，event.detail = {value}

        示例代码：

//.wxml

<!-- 滚动选择器 -->
<view>
    <view class="section section_gap">
        <text class="section__title">设置step</text>
        <view class="body-view">
            <slider bindchange="slider2change" step="5"/>
        </view>
    </view>

    <view class="section section_gap">
        <text class="section__title">显示当前value</text>
        <view class="body-view">
            <slider bindchange="slider3change" show-value/>
        </view>
    </view>

    <view class="section section_gap">
        <text class="section__title">设置最小/最大值</text>
        <view class="body-view">
            <slider bindchange="slider4change" min="50" max="200" show-value/>
        </view>
    </view>
</view>

//.js

Page({
    slider2change:function(e){
            console.log('slider2发生change事件，携带值为',e.detail.value)
        },
    slider3change:function(e){
            console.log('slider3发生change事件，携带值为',e.detail.value)
        },
    slider4change:function(e){
            console.log('slider4发生change事件，携带值为',e.detail.value)
        }
})

         效果截图：

>switch开关选择器

        >该组件应用十分普遍，它有两个状态：开和关

        >很多场景都会用到它，如微信设置里的新消息提醒 界面：是否接收消息、是否有声音、是否振动

switch开关选择器属性
属性类型默认值说明
checkedbooleanfalse是否选中
typestringswitch样式，有效值：switch, checkbox
colorstring#04BE02switch 的颜色，同 css 的 color
bindchangeeventhandlechecked 改变时触发change 事件，event.detail={ value}

        示例代码：

//.wxml
<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)
        }
})

        效果截图：

>form表单

        >该组件将表单里组件的值提交给js文件进行处理

        >可以提交switch、input、checkbox、slider、 radio、picker这些组件的值

        >提交表单的时候，会借助于button组件的 formType 为 submit 的属性，将表单组件中的value 值进行提交

        >需要在表单组件中加上 name 来作为 key

form表单属性
属性类型默认值说明
reportsubmitbooleanfalse是否返回 formId 用于发送模板消息
bindsubmiteventhandle携带 form 中的数据触发submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreseteventhandle表单重置时会触发 reset 事件

        示例代码：

//.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section section_gap">
        <view class="section__title">switch</view>
        <switch name="switch"/>
    </view>

    <view class="section section_gap">
        <view class="section__title">slider</view>
        <slider name="slider" show-value ></slider>
    </view>

    <view class="section">
        <view class="section__title">input</view>
            <input name="input" placeholder="please input here" />
    </view>

    <view class="section section_gap">
        <view class="section__title">单选框</view>
            <radio-group name="radio-group">
                <label><radio value="西瓜"/>西瓜</label>
                <label><radio value="葡萄"/>葡萄</label>
            </radio-group>
    </view>

    <view class="section section_gap">
        <view class="section__title">复选框</view>
            <checkbox-group name="checkbox">
                <label><checkbox value="苹果"/>苹果</label>
                <label><checkbox value="香蕉"/>香蕉</label>
            </checkbox-group>
    </view>

    <view class="btn-area">
        <button form-type="submit">Submit</button>
        <button form-type="reset">Reset</button>
    </view>
</form>

//.js

Page({
    formSubmit: function (e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value)
        },
    formReset: function () {
            console.log('form发生了reset事件')
        }
})

        效果截图：

 

...持续学习完善中。 

#学无止境#

南枫知我意～
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
微信小程序表单自定义组件vest-form-master.zip
09-25
微信小程序表单自定义组件vest-form-master.zip
在微信小程序中提交form表单
haohaoxueqd的博客
10-22 9996
微信小程序提交表单
微信小程序开发中的表单提交与数据验证
最新发布
qq_67153941的博客
05-03 127
微信小程序开发中的表单提交与数据验证是非常重要的内容，本文将介绍如何在小程序中进行表单提交和数据验证的操作，包括常用的表单元素、表单提交的流程、数据验证的方法等。三、数据验证的方法 数据验证是表单提交的重要环节，可以通过一些方法来验证用户输入的数据是否符合要求。下面将依次介绍这些表单元素的使用方法。二、表单提交的流程 在微信小程序中，表单提交一般分为两步：收集表单数据和提交表单数据。以上是关于微信小程序开发中的表单提交与数据验证的详细介绍，通过代码案例的演示，希望能帮助读者更。
微信小程序动态生成表单来啦！你再也不需要手写表单了！
分享互联网的有趣知识~
11-18 2724
由于我们在小程序上涉及到数据采集业务，需要经常使用表单，微信小程序的表单使用起来非常麻烦，数据和表单是分离的，每个输入框都需要做数据处理才能实现响应式数据，所以我开发了dc-vant-form，针对原生微信小程序+vant组件构建的自定义表单，开发者可以通过表单配置项来快速生成表单。
微信小程序自定义实现form表单
Mr_Luomo的博客
02-23 2146
【代码】微信小程序自定义实现form表单。
微信小程序开发--1.6表单选择组件(switch、radio和checkbox)
weixin_46479909的博客
06-29 1997
【代码】微信小程序开发--1.6表单选择组件(switch、radio和checkbox)
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
微信小程序、提示组件、用于解释提示
04-05
在微信小程序中，组件是构成用户界面的基本元素，它们可以被复用，提高开发效率并保持代码的整洁性。 本项目的核心是实现一个提示组件，用于向用户提供额外的信息或解释。当用户点击特定的文字标题或“问号”图标时...
微信小程序-组件练习
03-15
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的、无需下载安装即可使用的应用体验。在这个“微信小程序-组件练习”中，我们可以深入学习和实践微信小程序的各种组件功能...
微信小程序Color UI组件库
12-27
在微信小程序开发中，Color UI组件库提供了丰富的UI组件，如按钮、导航、列表、表单、弹窗、提示等，这些组件都遵循了一致的设计语言和风格，使得小程序的整体视觉效果更加专业和统一。开发者可以像拼积木一样，将...
微信小程序_事件
10-17
微信小程序事件是开发者在构建用户交互界面时必不可少的工具，它允许程序响应用户的操作，如点击、滑动等。在微信小程序中，事件系统是非常关键的一部分，它将前端UI与后端逻辑紧密联系起来，实现了丰富的用户体验。...
05-微信小程序常用组件-表单组件
感谢关注-最近在编写开源的自动化测试框架还没整理完
08-18 1375
1.表单组件 2.button按钮\案例代码 3.form表单\案例代码 4.image图片支持长按识别的码\案例代码
2020-09-08
weixin_41576919的博客
09-08 877
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 @[TOC](2020-09-08) 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 #1 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 #2 二、使用步骤 1.引入库 代..
微信小程序常用表单组件
冲出仁川，走出马德里，故事还会再继续
03-16 9512
微信小程序常用表单组件1、常用表单组件1.1 button1.2 checkbox1.3 input1.4 label1.5 form1.6 radio1.7 slider1.8 switch1.9 textarea2、实训小案例--问卷调查 1、常用表单组件 1.1 button   <button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。 代码示例： <view class="demo-box"> <view class="t
微信小程序基础知识--表单
zyddd131452的博客
06-11 314
一、 input 属性 type 最大的输入长度 为空的占位。二、选择到店时间 piker时间选择器组件 从底部弹起。默认选中状态 checked。form属性 表单。reser 最外面的块。有高度才能弹起选择时间。对整个块进行重置和提交。
小白开发微信小程序12--表单组件之form
hqwest的专栏
03-06 2096
微信团队为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的，开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签，只不过标签名字不一样。当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
微信小程序——输入框input
weixin_58963766的博客
07-08 5924
编写时为方便，写的一般是changeContent（），但这是缩写了，全部应该写changeContent：function（），也就是如图所示的方式。从展开的可以发现，（）是人家function的，所以自定义的事件的名称为changeContent。当输入框的内容发生变化时，通过事件对象 e 的 detail.value 属性可以获取到最新的输入框内容。可以结合下图，通过按路径查找的方式理解这句代码：通过不断修改输入文本框的内容发现，detail中包含的value的值在随着文本框内容变化而变化。
微信小程序之表单组件
weixin_53676834的博客
03-13 1132
color,font-size和font-weight。指定 placeholder 的样式，目前仅支持。
微信小程序选择器picker中range-key的用法
weixin_43923808的博客
08-19 2134
【代码】微信小程序选择器picker中range-key的用法。
微信小程序form表单组件
04-29
微信小程序的form表单组件是用于集用户输入信息的组件。它提供了一系列的表单元素，如input、textarea、picker等，可以方便地收集用户的文本、数字、日期等类型的数据。 form组件的基本用法是将需要收集数据的表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南枫知我意～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值