1.1、列表选择器：picker

2.从底部弹起的滚动选择器，现支持五种选择器，通过mode（模式）来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

3.普通选择器：

4.语法：mode=selector

5.样式：

6.属性：

代码：wxml：

viewclass="section"

viewclass="section__title"普通选择器/view

pickermode=”selector”bindchange="bindPickerChange"value="{{index}}"range="{{array}}"

viewclass="picker"

当前选择：{{array[index]}}

/view

/picker

/view

Js代码：

Page({

data:{

array:['美国','中国','巴西','日本'],

objectArray:[

{

id:0,

name:'美国'

},

{

id:1,

name:'中国'

},

{

id:2,

name:'巴西'

},

{

id:3,

name:'日本'

}

]，

index:0

}

7.绑定代码：

bindPickerChange:function(e){

console.log('picker发送选择改变，携带值为',e.detail.value)

this.setData({

index:e.detail.value

})

},

8.一个对象数组要注意的地方：

1.pickerbindchange="bindPickerChange"value="{{index}}"range="{{objectArray}}"strongspanstyle="color:#ff0000;"range-key="{{name}}"/span/strong

2.viewclass="picker"

3.当前选择：{{objectArray[index].name}}

4./view

5./picker

9.修改：

1.pickerbindchange="bindPickerChange"value="{{index}}"range="{{objectArray}}"spanstyle="color:#ff0000;"range-key="{{'name'}}"/span

2.viewclass="picker"

3.当前选择：{{objectArray[index].name}}

4./view

5./picker

10.多列选择器：

11.语法：mode=multiSelector

12.属性：

13.示例：

14.代码：

15.列改变代码：

bindMultiPickerColumnChange:function(e){

console.log('修改的列为',e.detail.column,'，值为',e.detail.value);

vardata={

multiArray:this.data.multiArray,

multiIndex:this.data.multiIndex

};

data.multiIndex[e.detail.column]=e.detail.value;

switch(e.detail.column){

case0:

switch(data.multiIndex[0]){

case0:

data.multiArray[1]=['扁性动物','线形动物','环节动物','软体动物','节肢动物'];

data.multiArray[2]=['猪肉绦虫','吸血虫'];

break;

case1:

data.multiArray[1]=['鱼','两栖动物','爬行动物'];

data.multiArray[2]=['鲫鱼','带鱼'];

break;

}

data.multiIndex[1]=0;

data.multiIndex[2]=0;

break;

case1:

switch(data.multiIndex[0]){

case0:

switch(data.multiIndex[1]){

case0:

data.multiArray[2]=['猪肉绦虫','吸血虫'];

break;

case1:

data.multiArray[2]=['蛔虫'];

break;

case2:

data.multiArray[2]=['蚂蚁','蚂蟥'];

break;

case3:

data.multiArray[2]=['河蚌','蜗牛','蛞蝓'];

break;

case4:

data.multiArray[2]=['昆虫','甲壳动物','蛛形动物','多足动物'];

break;

}

break;

case1:

switch(data.multiIndex[1]){

case0:

data.multiArray[2]=['鲫鱼','带鱼'];

break;

case1:

data.multiArray[2]=['青蛙','娃娃鱼'];

break;

case2:

data.multiArray[2]=['蜥蜴','龟','壁虎'];

break;

}

break;

}

data.multiIndex[2]=0;

console.log(data.multiIndex);

break;

}

multiIndex:[0,0,0],

date:'2016-09-01',

time:'12:01',

region:['广东省','广州市','海珠区'],

customItem:'全部'

16.具体值改变代码：

bindMultiPickerChange:function(e){

console.log('picker发送选择改变，携带值为',e.detail.value)

this.setData({

multiIndex:e.detail.value

})

},

17.时间选择器：

18.语法：mode=time

19.例子：

20.属性：

21.代码：

viewclass="section"

viewclass="section__title"时间选择器/view

pickermode="time"value="{{time}}"start="09:01"end="21:01"bindchange="bindTimeChange"

viewclass="picker"

当前选择:{{time}}

/view

/picker/view

22.Js代码：

bindTimeChange:function(e){

console.log('picker发送选择改变，携带值为',e.detail.value)

this.setData({

time:e.detail.value

})

},

23.日期选择器：

24.语法：mode=date

25.属性：

26.代码：

viewclass="section"

viewclass="section__title"日期选择器/view

pickermode="date"value="{{date}}"start="2015-09-01"end="2017-09-01"bindchange="bindDateChange"

viewclass="picker"

当前选择:{{date}}

/view

/picker/view

27.Js代码：

bindDateChange:function(e){

console.log('picker发送选择改变，携带值为',e.detail.value)

this.setData({

date:e.detail.value

})

},

28.一篇有秒的博客：

29.http://www.php.cn/xiaochengxu-386138.html

30.Picker-view：内嵌列表选择器

31.属性：

32.语法：

picker-viewindicator-style="height:50px;"style="width:100%;height:300px;"value="{{value}}"bindchange="bindChange"

picker-view-column

viewwx:for="{{years}}"style="line-height:50px"{{item}}年/view

/picker-view-column

picker-view-column

viewwx:for="{{months}}"style="line-height:50px"{{item}}月/view

/picker-view-column

picker-view-column

viewwx:for="{{days}}"style="line-height:50px"{{item}}日/view

/picker-view-column

/picker-view

33.Js代码：

constdate=newDate()constyears=[]constmonths=[]constdays=[]

for(leti=1990;i=date.getFullYear();i++){

years.push(i)

}

for(leti=1;i=12;i++){

months.push(i)

}

for(leti=1;i=31;i++){

days.push(i)

}

Page({

data:{

years:years,

year:date.getFullYear(),

months:months,

month:2,

days:days,

day:2,

value:[9999,1,1],

},

bindChange:function(e){

constval=e.detail.value

this.setData({

year:this.data.years[val[0]],

month:this.data.months[val[1]],

day:this.data.days[val[2]]

})

}

})

Tips

34.1.tip:滚动时在iOS自带振动反馈，可在系统设置-声音与触感-系统触感反馈中关闭

Radio：单项选择器：

语法：

radio-groupclass="radio-group"bindchange="radioChange"

labelclass="radio"wx:for="{{items}}"

radiovalue="{{item.name}}"checked="{{item.checked}}"/{{item.value}}

/label/radio-group

属性：

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)

}

})

内部逻辑代码：

Slider：滚动选择器：

样式：

语法：viewclass="sectionsection_gap"

textclass="section__title"设置step/text

viewclass="body-view"

sliderbindchange="slider2change"step="5"/

/view/view

属性：

详细代码：

viewclass="sectionsection_gap"

textclass="section__title"设置step/text

viewclass="body-view"

sliderbindchange="slider2change"step="5"/

/view/view

viewclass="sectionsection_gap"

textclass="section__title"显示当前value/text

viewclass="body-view"

sliderbindchange="slider3change"show-value/

/view/view

viewclass="sectionsection_gap"

textclass="section__title"设置最小/最大值/text

viewclass="body-view"

sliderbindchange="slider4change"min="50"max="200"show-value/

/view/view

varpageData={}

for(vari=1;i5;i++){

(function(index){

pageData['slider'+index+'change']=function(e){

console.log('slider'+'index'+'发生change事件，携带值为',e.detail.value)

}

})(i)

}

Page(pageData)

Switch：开关选择器：

语法：viewclass="body-view"

switchcheckedbindchange="switch1Change"/

switchbindchange="switch2Change"//view

viewswitch类型开关/viewswitchtype="switch"checked="true"bindchange="listenerSwitch"/

Js代码：

Page({

switch1Change:function(e){

console.log('switch1发生change事件，携带值为',e.detail.value)

},

switch2Change:function(e){

console.log('switch2发生change事件，携带值为',e.detail.value)

}

})

35.Textarea：多行输入框

36.语法：

viewclass="section"

textareabindblur="bindTextAreaBlur"auto-heightplaceholder="自动变高"/

/view

37.属性：

BugTip

38.1.bug:微信版本6.3.30，textarea在列表渲染时，新增加的textarea在自动聚焦时的位置计算错误。

39.2.tip:textarea的blur事件会晚于页面上的tap事件，如果需要在button的点击事件获取textarea，可以使用form的bindsubmit。

40.3.tip:不建议在多行文本上对用户的输入进行修改，所以textarea的bindinput处理函数并不会将返回值反映到textarea上。

41.4.tip:textarea组件是由客户端创建的原生组件，它的层级是最高的，不能通过z-index控制层级。

42.5.tip:请勿在scroll-view、swiper、picker-view、movable-view中使用textarea组件。

43.6.tip:css动画对textarea组件无效。