微信小程序开发（6）-表单数据组件的使用（picker,form,input,button)

如图：电子商务网站经常使用到的功能

1..js中定义绑定到滚动选择器中的数据

 data: {
    array:['天津','成都','昆明','北京','上海'],
    index:0
   },

2."天津"是一个滚动选择器。使用picker组件定义

  <view class="nav">
    <view class="selectCity">
      <picker name="cityIndex" value="{{index}}" range="{{array}}" bindchange="changeIndex">
         <view class="picker">
           {{array[index]}}              
         </view>
        </picker>
    </view>

3.定义输入文本框

 <view class="inputValue">
      <input name="productName" placeholder="输入商品名称"></input>
    </view>

4.按钮

 <view class="">
    <button form-type="submit" style="font-size:24rpx">搜索</button>
    </view>

注意：所有表单组件要放入<form>中，完整代码如下：

<!--index.wxml-->
<form bindsubmit="submitProduct">
  <!--获取城市-->
  <view class="nav">
    <view class="selectCity">
      <picker name="cityIndex" value="{{index}}" range="{{array}}" bindchange="changeIndex">
         <view class="picker">
           {{array[index]}}
         </view>
        </picker>
    </view>
    <view class="inputValue">
      <input name="productName" placeholder="输入商品名称"></input>
    </view>
    <view class="">
    <button form-type="submit" style="font-size:24rpx">搜索</button>
    </view>
  </view>
</form>

5.在.wxss中定义样式

/**index.wxss**/
.nav{
  background: #FB5628;
  display:flex;
  padding:20rpx;
  justify-content:spcace-between;
  align-items:center;
  font-family: "微软雅黑";
  font-size:36rpx;
}
.inputValue{
  background: #B53E1D;
  width:70%;
  height:40rpx;
  border-radius: 20rpx;
  font-size:24rpx;
  padding:10rpx;
  margin-left: 2%;
  margin-right:2%;
}
.picker{
  color: fff;
  font-size:24rpx;
}

6.在.js中定义事件处理

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    array:['天津','成都','昆明','北京','上海'],
    index:0
   },
   changeIndex:function(e){
     this.setData({
       index:e.detail.value
     })
   },
   submitProduct:function(e)
   {
        console.log(e);     
   }
}
)