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

1、列表选择器：picker

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

 

普通选择器：

语法：mode = selector

样式：

 

 

 

属性：

 

 

 

 

 

代码：wxml：

<view class="section">

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

  <picker  mode=”selector” bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

    <view class="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

 

}

 

 

绑定代码：

 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">

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

  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">

    <view class="picker">

      当前选择: {{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">

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

  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">

    <view class="picker">

      当前选择: {{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>

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

    </picker-view-column>

    <picker-view-column>

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

    </picker-view-column>

    <picker-view-column>

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

    </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">

  <label class="radio" wx:for="{{items}}">

    <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 class="body-view">

    <slider bindchange="slider2change" step="5"/>

  </view></view>

属性：

 

 

详细代码：

<view class="section section_gap">

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

  <view class="body-view">

    <slider bindchange="slider2change" step="5"/>

  </view></view>

<view class="section section_gap">

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

  <view class="body-view">

    <slider bindchange="slider3change" show-value/>

  </view></view>

<view class="section section_gap">

  <text class="section__title">设置最小/最大值</text>

  <view class="body-view">

    <slider bindchange="slider4change" min="50" max="200" show-value/>

  </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">

    <switch checked bindchange="switch1Change"/>

<switch bindchange="switch2Change"/></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 class="section">

  <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />

</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 组件无效。