微信小程序表单控件【族谱聚微信小程序表单控件】

日常开发工作中，有大量的表单输入处理要完成，写这些Form工作比较重叠,于是写了个控件，有需要的朋友下载：

https://download.csdn.net/download/sosvo/16339563

这篇博文是讲下表单控件的组成和调用。

1、控件引用了其它两个小组件：select组件和dateSelect组件

1.1、select组件数据选择【类似web的select控件】

1.2、dateSelect组件日期选择【阴历、阳历双选】

2、调用时引用、设置、事件处理

2.1引用：面页.json中usingComponents节点中定义控件，页面中使用

.json : "FormList": "../../components/wnd-module/Form-Plus",

.wxml: <FormList id="iid_form_1" setting="{{data_form_setting}}" bind:even-callback="OnFormCallback" bind:OnSubmit="OnFormSubmit" />

2.2 设置

在.js文件中设置Form的内容和Button的内容

data_form_setting:{buttons:{cancel:null,submit:{text:'确认',plus_class:'default'}},fields:[{text:'姓氏',type:'call-back', field_name:'family-name',icon:'', placeholder:'请选择家族姓氏',verify:{use:true,tooltip:'姓氏为必填项，请选择'},primary:[{key:1,value:'男'},{key:2,value:'女'}],default:[{key:1,value:'男'}],result:[]},{text:'性别',type:'radio', field_name:'sex',icon:'', placeholder:'',verify:{use:true,tooltip:'性别为必填项，请选择'},primary:[{key:1,value:'男', chked:true},{key:2,value:'女',chked:false}],result:[]},{text:'生日',type:'date', field_name:'birth_day',icon:'', placeholder:'请选择出生年月日',verify:{use:true,tooltip:'生日为必填项，请选择'},primary:[],default:[{key:1,value:'2020-10-10'}],result:[]},{text:'时辰',type:'select', field_name:'birth_day',icon:'', placeholder:'请选择出生时辰',verify:{use:true,tooltip:'请选择出生时辰'},primary:[{key:1,value:'子时[23点-1点]'},{key:2,value:'丑时[1点-3点]'},{key:3,value:'寅时[3点-5点]'},{key:4,value:'卯时[5点-7点]'},{key:5,value:'辰时[7点-9点]'},{key:6,value:'巳时[9点-11点]'},{key:7,value:'午时[11点-13点]'},{key:8,value:'未时[13点-15点]'},{key:9,value:'申时[15点-17点]'},{key:10,value:'酉时[17点-19点]'},{key:11,value:'戌时[19点-21点]'},{key:12,value:'亥时[21点-23点]'}],default:[],result:[]},  {text:'辈序',type:'text_plus', field_name:'order_trem',icon:'../../resources/images/icons/china-book.png', placeholder:'输入辈序或选择已加入族谱的辈序',verify:{use:false,tooltip:''},primary:[],default:[],result:[]},{text:'出生地',type:'area', field_name:'birth_area',icon:'', placeholder:'请选择出生的地区',verify:{use:false,tooltip:''},primary:[],default:[],result:[]},{text:'期待性格',type:'mulit', field_name:'nature',icon:'', placeholder:'',verify:{use:false,tooltip:''},primary:[{key:'1',value:'聪明'},{key:'2',value:'开朗'},{key:'3',value:'智慧'},{key:'4',value:'踏实'},{key:'5',value:'勇敢'}],default:[],result:[]},{text:'避讳字',type:'text', field_name:'taboo_trem',icon:'', placeholder:'多个避讳字请给","分隔',verify:{use:false,tooltip:''},primary:[],default:[],result:[]},]},

其中的fields数组里每个对象是一个要操作的行，每个字段的含义：

text:显示的名称

type:这行的类型

field_name:行标识

[text:文体输入行,radio:单选mulit:多选,select:选择控件,date:日期选择,]

icon:使用的小图标

placeholder:占位提示信息

verify: 验证信息,use:是否需要验证,tooltip:验证提示

primary:预选值

result:结果值

2.3 事件处理

事件包含了点击回调和表单提交后的处理

文档很糙，有要讨论的就加微信：blb-kim ，加前端开发群

微信小程序表单控件【族谱聚微信小程序表单控件】相关推荐

微信外卖小程序怎么计算与客户的距离_小程序掌单说 | 外卖O2O下半场，落后就要挨打！...
目前,外卖平台格局基本确立,人口红利消失,外卖竞争日益激烈,大盘流量瓜分困难,获客渠道单一,依赖中心化平台流量分发,平台顾客难以转化为自有店铺顾客,难以形成店铺的私域流量池. 此外,随着外卖市场的稳固 ...
微信小程序+云开发项目实战：商品类小程序（化妆品门店）
化妆品门店目录云开发简介页面之间导图登陆页面开发新建集合(表) 用户注册购物车里购买商品确认支付判断支付密码云函数修改数据 update_goods delete_carts 汇总 ...
微信小程序商店 | 即速商店_福利类小程序
即速应用商店_分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可免费发布自己的小程序获取巨大流量 . PS:关于微信小程序商店 ...
【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】
微信小程序入门文章目录微信小程序入门前言一.小程序的概述 1.小程序简介 2.小程序诞生 3.小程序功能 4.小程序创建步骤二.小程序的准备工作 1.注册开发者账号 2.小程序信息完善 3. ...
详解微信小程序地图组件实例：远征军墓地分布图小程序
先上效果图,有兴趣再往下看. 1是主页面,点一下,进入2,可以看到地图底图上有墓地分布的点位,划拉划拉放大缩小,把缅甸那块放大了,可以看到墓地点位,随便点一个点位,浮出墓地名称"西保火车站墓 ...
微信小程序 php开发全程,带你体验微信小程序完整开发过程
微信小程序还没正式发布就已经迅速成为大家讨论的焦点,那么大家可能觉得只有收到内测邀请才能体验小程序的开发流程,其实不然,大家都可以体验,下面就带大家一起了解. 下载微信 Web 开发者工具首先,微信 ...
21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)
21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答) 网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz 备用地址(腾 ...
2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
python制作桌面小程序_微信小程序在线制作：快速生成一个餐饮小程序
相信很多餐饮行业的商家都遇到过这类问题:一到用餐高峰期,餐厅内就拥挤不堪,工作人员也忙得不可开交,前厅后厨来回跑,时间长了顾客也等得不耐烦.此外,外卖平台的高额抽成也让普通餐饮商家生存越来越艰难.本来 ...

微信小程序表单控件【族谱聚微信小程序表单控件】

微信小程序表单控件【族谱聚微信小程序表单控件】相关推荐

最新文章

热门文章

微信小程序 表单控件【族谱聚微信小程序表单控件】

微信小程序 表单控件【族谱聚微信小程序表单控件】相关推荐

最新文章

热门文章

微信小程序表单控件【族谱聚微信小程序表单控件】

微信小程序表单控件【族谱聚微信小程序表单控件】相关推荐