微信小程序的几个表单组件

1、列表选择器：picker

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

微信小程序的几个表单组件

普通选择器：

语法：mode = selector

样式：

属性：

代码：wxml：

<view class="section__title">普通选择器</view>

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

</view>

</picker>

</view>

Js代码：

Page({

data: {

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

objectArray: [

{

id: 0,

name: '美国'

{

id: 1,

name: '中国'

{

id: 2,

name: '巴西'

{

id: 3,

name: '日本'

}

]，

index: 0

}

绑定代码：

bindPickerChange: function(e) {

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

this.setData({

index: e.detail.value

})

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

1. <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" <strong><span style="color:#ff0000;">range-key="{{name}}"</span></strong>>

2. <view class="picker">

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

4. </view>

5. </picker>

修改：

1. <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" <span style="color:#ff0000;">range-key="{{'name'}}"</span>>

2. <view class="picker">

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

4. </view>

5. </picker>

多列选择器：

语法：mode = multiSelector

属性：

示例：

代码：

列改变代码：

bindMultiPickerColumnChange: function (e) {

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

var data = {

multiArray: this.data.multiArray,

multiIndex: this.data.multiIndex

};

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

switch (e.detail.column) {

case 0:

switch (data.multiIndex[0]) {

case 0:

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

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

break;

case 1:

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

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

break;

}

data.multiIndex[1] = 0;

data.multiIndex[2] = 0;

break;

case 1:

switch (data.multiIndex[0]) {

case 0:

switch (data.multiIndex[1]) {

case 0:

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

break;

case 1:

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

break;

case 2:

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

break;

case 3:

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

break;

case 4:

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

break;

}

break;

case 1:

switch (data.multiIndex[1]) {

case 0:

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

break;

case 1:

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

break;

case 2:

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: '全部'

具体值改变代码：

bindMultiPickerChange: function (e) {

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

this.setData({

multiIndex: e.detail.value

})

时间选择器：

语法：mode = time

例子：

属性：

代码：

<view class="section__title">时间选择器</view>

当前选择: {{time}}

</view>

</picker></view>

Js代码：

bindTimeChange: function(e) {

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

this.setData({

time: e.detail.value

})

日期选择器：

语法：mode = date

属性：

代码：

<view class="section__title">日期选择器</view>

当前选择: {{date}}

</view>

</picker></view>

Js代码：

bindDateChange: function(e) {

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

this.setData({

date: e.detail.value

})

一篇有秒的博客：

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

Picker-view：内嵌列表选择器

微信小程序的几个表单组件

属性：

微信小程序的几个表单组件

语法：

<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">

<picker-view-column>

</picker-view-column>

<picker-view-column>

</picker-view-column>

<picker-view-column>

</picker-view-column>

</picker-view>

Js代码：

const date = new Date() const years = [] const months = [] const days = []

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

years.push(i)

}

for (let i = 1 ; i <= 12; i++) {

months.push(i)

}

for (let i = 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) {

const val = e.detail.value

this.setData({

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

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

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

})

}

})

Tips

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

Radio：单项选择器：

微信小程序的几个表单组件

语法：

<radio-group class="radio-group" bindchange="radioChange">

<radio value="{{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：滚动选择器：

样式：

微信小程序的几个表单组件

语法：<view class="section section_gap">

<text class="section__title">设置step</text>

</view></view>

属性：

微信小程序的几个表单组件

详细代码：

<text class="section__title">设置step</text>

</view></view>

<text class="section__title">显示当前value</text>

</view></view>

</view></view>

var pageData = {}

for (var i = 1; i < 5; i++) {

(function (index) {

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

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

}

})(i)

}

Page(pageData)

Switch：开关选择器：

微信小程序的几个表单组件

语法：<view class="body-view">

<view>switch类型开关</view> <switch type="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)

}

})

微信小程序的几个表单组件

Textarea：多行输入框

语法：

</view>

属性：

微信小程序的几个表单组件

Bug & Tip

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

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

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

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

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

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

微信小程序 的几个表单组件

Tips

Bug & Tip

相关推荐

微信小程序的几个表单组件