选自杨敬华画作。我,一直为亲手促成其成为同事感到骄傲,类似让我骄傲的,还有几位。
图文,超过1000字,就没有耐心看完,我尽量控制在1000字以内!
今天,编个程,展示一下复选款数据获取方式
需求:从五种水果中,选择你爱吃的,在console(控制台)上打印出来
知识点:要把放在中,然后通过bindchange传递事件参数给JS处理.
单选框,道理一样,要把放在中,然后通过bindchange传递事件参数给JS处理.
先看WXML,有两种写法啊,一种是直接写:
<checkbox-group class="test" bindchange="bindchangeDeal">
<checkbox value="Apple">苹果checkbox>
<checkbox value="Orange">桔子checkbox>
<checkbox value="Banana">香蕉checkbox>
<checkbox value="Pear">雪梨checkbox>
<checkbox value="Mango">芒果checkbox>
checkbox-group>
解释一下啊,bindchange是组件checkbox-group或radio-group的属性,表示当此组件受到点击时,该组件将调用bindchange属性值所指出的函数,或称为事件处理函数,该函数要在.js中有定义,事件数值通过事件处理函数的形参传递!
对应的.js如下:
Page({
data:{
},
bindchangeDeal:function(event){
console.log("已选择的水果:",event);//输出事件参数event,event这个名字可以自己起啊
console.log("已选择的水果:",event.detail);//这个看event对象的哪个属性含有所选的值呢
console.log("已选择的水果:",event.detail.value);//再往下看,在这里!结果,是个数组啊!
},
})
对应的WXSS如下:
.test{
margin-top: 50rpx;
font-size: 14px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
WXML的第二种写法,使用循环渲染,将数据定义在.js的data对象中,WXML如下:
<checkbox-group class="test" bindchange="bindchangeDeal">
<checkbox wx:for="{{itemList}}" value="{{item.nameValue}}">{{item.name}}checkbox>
checkbox-group>
对应的.JS如下,主要是注意itemList这个对象数组的定义!
Page({
data:{
itemList:[
{name:"苹果",nameValue:"Apple"},
{name:"桔子",nameValue:"Orange"},
{name:"香蕉",nameValue:"Banana"},
{name:"雪梨",nameValue:"Pear"},
{name:"芒果",nameValue:"Mango"}
]
},
bindchangeDeal:function(event){
console.log("已选择的水果:",event);//输出事件参数event,event这个名字可以自己起啊
console.log("已选择的水果:",event.detail);//这个看event对象的哪个属性含有所选的值呢
console.log("已选择的水果:",event.detail.value);//再往下看,在这里!
},
})
wxss没有改变。
上述两种WXML的执行效果相同,页面展示如下:
控制台效果,自行动手做一下吧。
单选框跟复选框的道理一样,只是将checkbox改为radio就以了!
支持我!点赞!
支持我!点”在看“更给力!
后续想法:
oh,因为获得阿单提供的小程序视频教学资料,让我下决心暂停我的小程序学习内容更新了,两个意思,一是阿单传给我的东西,很系统的91课,看颗粒度,跟我规划的差不多,我已经写了12课,还有80节,至少还需要80天,大概三个月吧,那就到年底了!不行,这个时间太长了!我得先把几个大事儿开个头儿,才能搞这种操作性的东西;
二是,我的初心是汇总小程序知识点,基本是文字的,但是,这个东西,作为知识点汇总,只能自己用,后续,筹划尝试视频方式替代现在的方式。
也许,我还会延续现在的方式更新,但是,会慢下来呢!我在考虑换个方式,继续我的小程序之旅,换个方式的目标是能被更多非朋友圈内人士接受!等着我.......
双节假期我创立并维护了自己的订阅号,很多朋友赏脸,点赞,我的同事、朋友还有我在建总行工作时的领导也在给我点“在看”,多谢啊!多谢!
今生有缘,我们共事几年,有你无憾,永远是朋友!
Never backdown!