3-4章 第3章 form表单组件与小程序前后端通信
View它相当于是一个点击触发一个事件，但是它的事件应该是相对来说可能是比较是偏向于页面上的一些展示，或者说是页面上的一些导航的一些跳转。Button它是一个标签，
button是一个标签，一般去触发按钮的话大部分我们会去让我们的小程序页面和我们的后端进行一个交互，交互的时候它会有一个网络的延时。当有网络延时的时候我们就可以使用这个loading。
<button>按钮</button> <button size="mini">按钮1</button> <button size="mini" type=\'default\'>按钮2</button> <button size="mini" type=\'primary\'>按钮3</button> <button size="mini" type=\'warn\' plain=\'{{true}}\'>按钮4</button> <button size="mini" type=\'warn\' disabled=\'{{true}}\' loading=\'{{true}}\'>按钮5</button>
form-type要结合form表单一起去使用。
和View有关的。
checkbox是多选框。在Web开发的html页面里面肯定也是有用过checkbox。checkbox它也是可以配合label一起来使用的。
把所有的多选框全部放到多选框组checkbox-group内才可以。并且这个组会有一个change事件。这是我们以前所说的onchange事件。那么我们通过bindchange就可以绑定一个change事件。
这是单标签的展示方式。
<checkbox-group> <checkbox value=\'v中国\'/>中国 <checkbox value=\'v美国\' disabled=\'{{true}}\'/>美国 <checkbox value=\'v俄国\' checked=\'{{true}}\' color=\'red\'/>俄国 </checkbox-group> <checkbox-group> <view wx:for="{{array}}"> <checkbox value=\'{{item.name}}\' checked=\'{{item.checked}}\' color=\'{{item.color}}\' disabled=\'{{item.disabled}}\'/>{{item.value}} </view> </checkbox-group>
// pages/view/view.js Page({ data:{ array:[ {name:"v中国",value:"中国",checked:true,color:"red", disabled:false}, {name:"v美国", value: "美国", checked:false,color: "blue",disabled:false}, {name: "v俄国", value: "俄国" , checked: true, color: "pink", disabled:false} ] } })
<checkbox-group> <checkbox value=\'v中国\'/>中国 <checkbox value=\'v美国\' disabled=\'{{true}}\'/>美国 <checkbox value=\'v俄国\' checked=\'{{true}}\' color=\'red\'/>俄国 </checkbox-group> <checkbox-group> <view wx:for="{{array}}"> <checkbox value=\'{{item.name}}\' checked=\'{{item.checked}}\' color=\'{{item.color}}\' disabled=\'{{item.disabled}}\'>{{item.value}}</checkbox> </view> </checkbox-group>
// pages/view/view.js Page({ data:{ array:[ {name:"v中国",value:"中国",checked:true,color:"red", disabled:false}, {name:"v美国", value: "美国", checked:false,color: "blue",disabled:false}, {name: "v俄国", value: "俄国" , checked: true, color: "pink", disabled:false} ] } })
这是改为用双标签去展示。
还有另外一种方式。官方建议我们使用label和checkbox绑定使用。label它其实可以配合很多去进行使用。
因为View是竖排/纵排的排序。然后label是横排。
<checkbox-group> <checkbox value=\'v中国\'/>中国 <checkbox value=\'v美国\' disabled=\'{{true}}\'/>美国 <checkbox value=\'v俄国\' checked=\'{{true}}\' color=\'red\'/>俄国 </checkbox-group> <checkbox-group> <label wx:for="{{array}}"> <checkbox id="{{item.id}}" value=\'{{item.name}}\' checked=\'{{item.checked}}\' color=\'{{item.color}}\' disabled=\'{{item.disabled}}\'/>{{item.value}} </label> </checkbox-group> <label for=\'1001\'>测试点击</label>
// pages/view/view.js Page({ data:{ array:[ { id: "1001", name:"v中国",value:"中国",checked:true,color:"red", disabled:false}, { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false}, { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink", disabled:false} ] } })
e是事件对象，并且它是一个change事件，并且它里面我们触发一个change的时候，它所有的值带过来是一个数组对象，
// pages/view/view.js Page({ data:{ array:[ { id: "1001", name:"v中国",value:"中国",checked:true,color:"red", disabled:false}, { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false}, { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false} ] }, changed: function(e) { debugger } })
<checkbox-group bindchange="changed"> <checkbox value=\'v中国\'/>中国 <checkbox value=\'v美国\' disabled=\'{{true}}\'/>美国 <checkbox value=\'v俄国\' checked=\'{{true}}\' color=\'red\'/>俄国 </checkbox-group> <checkbox-group> <label wx:for="{{array}}"> <checkbox id="{{item.id}}" value=\'{{item.name}}\' checked=\'{{item.checked}}\' color=\'{{item.color}}\' disabled=\'{{item.disabled}}\'>{{item.value}}</checkbox> </label> </checkbox-group>
<form bindsubmit=\'formSubmit\' bindreset=\'formReset\'> <checkbox-group name="aa" bindchange="changed"> <checkbox value=\'v中国\'/>中国 <checkbox value=\'v美国\' disabled=\'{{true}}\'/>美国 <checkbox value=\'v俄国\' checked=\'{{true}}\' color=\'red\'/>俄国 </checkbox-group> <checkbox-group name="bb"> <label wx:for="{{array}}"> <checkbox id="{{item.id}}" value=\'{{item.name}}\' checked=\'{{item.checked}}\' color=\'{{item.color}}\' disabled=\'{{item.disabled}}\'>{{item.value}}</checkbox> </label> </checkbox-group> <button form-type=\'submit\'>提交</button> <button form-type=\'reset\'>重置</button> </form>
// pages/view/view.js Page({ data:{ array:[ { id: "1001", name:"v中国",value:"中国",checked:true,color:"red", disabled:false}, { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false}, { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false} ] }, changed: function(e) { }, formSubmit: function(e) { debugger; }, formReset: function () { console.log("data has been resetted..."); } })
{ "pages":[ "pages/form/myform/myform", "pages/form/checkbox/checkbox", "pages/form/buttons/buttons", "pages/basic/basic", "pages/movable/movable", "pages/swiper/swiper", "pages/scrollView/scrollView", "pages/view/view", "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
inputs.wxml
<view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <input value="学习小程序实战" maxlength=\'10\' cursor-spacing=\'0\'></input> <input value="number" type=\'number\'></input> <input value="idcard" type=\'idcard\'></input> <input value="digit" type=\'digit\'></input> 密码框: <input value="" password=\'{{true}}\'></input> placeholder: <input value="" placeholder=\'请输入你的用户名\' placeholder-style=\'color:green;\'></input> placeholder: <input value="" placeholder=\'请输入你的用户名\' placeholder-class=\'placeholder\'></input> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view>
<view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <input value="学习小程序实战" maxlength=\'10\' cursor-spacing=\'300\'></input> <input value="number" type=\'number\'></input> <input value="idcard" type=\'idcard\'></input> <input value="digit" type=\'digit\'></input> 密码框: <input value="" password=\'{{true}}\'></input> placeholder: <input value="" placeholder=\'请输入你的用户名\' placeholder-style=\'color:green;\'></input> placeholder: <input value="" placeholder=\'请输入你的用户名\' placeholder-class=\'placeholder\'></input> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view>
\'
<view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <view>123456</view> <input value="学习小程序实战" maxlength=\'10\' cursor-spacing=\'300\'></input> <input value="number" type=\'number\' focus=\'{{true}}\'></input> <input value="idcard" type=\'idcard\'></input> <input value="digit" type=\'digit\'></input> 密码框: <input value=""
请发表评论