小程序表单可视化布局的input和picker

实现我们要达到的目的是后台加载表单的数据，那么我们需要从onload小程序源码中获取数据代码:index.jsPage({data:{form:[]},onLoad:function(option){console.log(1)varform=[{'name':'name','type':'input','field':'name','val':''},{'name':'type','type':'dx','field':'dx','val':[0,0,0],'multiArray':[['无脊椎动物','脊椎动物'],['扁平动物','线性动物','环节动物','软体动物','节肢动物'],['猪肉绦虫','血-suckingworms']],},]this.setData({form:form})},bindMultiPickerChange:function(e){console.log('pickersendsselectionchangewithvalue',e.detail.value)varindex=1lettemp='form['+index+'].val'//获取列表[index].datethis.setData({[temp]:e.detail.value})console.log(this.data.form)},bindMultiPickerColumnChange:function(e){console.log('修改的列为',e.detail.column,',值为',e.detail.value);//知道修改的列后，可以修改multiIndex中对应元素的值，然后修改multiArray}})index.wxml{{item1.name}}--{{item1.type}}--{{item1.field}}--{{item1.val}}{{item1.name}}:{{item1.multi数组[0][item1.val[0]]}}，{{item1.multiArray[1][item1.val[1]]}}，{{item1.multiArray[2][item1.val[2]]}}index.wxss.picker-box{margin-top:0rpx;宽度：100%；位置：固定；top:0;}.skill-picker{高度:80rpx;背景色：rgba(0,121,132,0.8);box-shadow:0rpx5rpx16rpxrgba(0,0,0,0.05);}.skill-title{line-height:80rpx;文本对齐：居中；垂直对齐：中间；白颜色;字体大小：36rpx；font-weight:bold;}.drop-down{position:fixed;顶部：0；右：0；保证金顶部：18rpx；右边距：48rpx；显示：内联块；宽度：48rpx；高度：48rpx；我的公众号：紫枫的精彩世界，获取独家学习资源和每日干货推送。如果你对我的其他话题感兴趣，可以直接去我的个人博客：www.wangmingchang.com。