如图：电子商务网站经常使用到的功能
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);
}
}
)