微信小程序 input、picker组件

在上一篇博客已经介绍了三种表单组件，在这里再介绍两种。
附上一篇博客的链接：https://blog.csdn.net/weixin_44215175/article/details/104219220
官方开放文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

input单行输入框
单行输入框的类型有text、number、idcard、digit四种
三个常用事件：输入时（bindinput）、光标聚集时（bindfocus）、光标离开时（bindblur）
picker滚动选择器
这是一个从底部弹起的滚动选择器；支持五种类型：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器

对于不同的类型的选择器有着不同的属性，详细可参考文章顶部的微信开放文档。
示例：

//WXML文件
<!--picker-->
<view class="section"><view class="section__title">普通选择器</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择：{{array[index]}}</view></picker>
</view>
<view class="section"><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view></picker>
</view>
<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><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>
<view class="section"><view class="section__title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker>
</view>

Page({data: {array:['篮球','足球','羽毛球','乒乓球'],objectArray: [{id: 0,name: '篮球'},{id: 1,name: '足球'},{id: 2,name: '羽毛球'},{id: 3,name: '乒乓球'}],index: 0,multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],objectMultiArray: [[{id: 0,name: '无脊柱动物'},{id: 1,name: '脊柱动物'}], [{id: 0,name: '扁性动物'},{id: 1,name: '线形动物'},{id: 2,name: '环节动物'},{id: 3,name: '软体动物'},{id: 3,name: '节肢动物'}], [{id: 0,name: '猪肉绦虫'},{id: 1,name: '吸血虫'}]],multiIndex: [0, 0, 0],date: '2018-09-01',time: '12:01',region: ['广东省', '广州市', '天河区'],customItem: '全部'},bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})},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;break;}console.log(data.multiIndex);this.setData(data);},bindDateChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date: e.detail.value})},bindTimeChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({time: e.detail.value})},bindRegionChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})}
})

效果：

微信小程序 input、picker组件相关推荐

微信小程序的picker使用对象数组
在网上看到<发现微信小程序的picker组件不能直接使用索引数组({key : value}), 于是我在服务器端把索引数组中的key和value>贴子误导初学开发者... 正确的使用方法 ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序自定义picker多列选择器
需求说明使用 mpvue 实现自定义的 picker 多列选择器. 1.数据结构说明根据 picker 的数据特征,需要构造一个如下所示的数据结构.data数组中的三个元素,分别用于渲染 pick ...
微信小程序canvas 绘画组件的使用，画图
微信小程序canvas 绘画组件的使用,画图 canvas 绘画组件文章目录微信小程序canvas 绘画组件的使用,画图闲来没事写个画图的小工具吧,于是就用到了小程序的canvas组件一.先来 ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
小程序数据框有重影_微信小程序input重影什么原因?怎么解决重影?
微信小程序input重影什么原因?怎么解决重影?微信小程序input输入框输入出现了重影的情况,这是什么原因呢?又该怎么去解决微信小程序input重影问题. 微信小程序input重影怎么办? 问题描述 ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...

微信小程序 input、picker组件

微信小程序 input、picker组件相关推荐

最新文章

热门文章