微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
来源:互联网 发布:java开源吗 编辑:程序博客网 时间:2024/05/14 08:38
如图:电子商务网站经常使用到的功能
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);
}
}
)
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 微信小程序picker组件不能使用对象的解决办法
- 微信小程序picker组件
- 微信小程序把玩(十八)picker组件
- 微信小程序组件(七)picker选择器
- form表单提交中的input,button,submit
- 微信小程序----组件之picker
- 微信小程序之picker组件
- form表单的input组件的10种提交方式
- 使用antd的Form组件在hubmit事件外的其他事件中获取Form表单中input的值
- 微信小程序picker组件下拉框选择某个值动态添加input输入框
- form表单的input对象
- form表单的input对象
- 微信小程序的form组件
- 微信小程序 图文混编 重写picker组件
- 微信小程序基础之表单Form的使用
- 使用js获取表单form的数据
- Android开发之Button组件的使用
- Android进阶之路
- 虚拟继承与菱形虚拟继承
- C语言在单片机开发中的一些技巧
- EFR32MG项目开发“复盘”
- 目标检测与跟踪
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 数学黑洞
- 经典算法之快速排序
- Docker常用命令总结
- 关于AfxMessageBox没有重载函数
- Nagios监控linux主机以及硬件信息
- ArcGIS for android 离线地图 案例
- 详细解说STL hash_map
- MySQL 索引基本原则