【微信小程序】选择器组件picker

picker组件的定义

picker组件是一种从底部向上弹起的滚动选择器。

picker组件的类型

在官方文档中，有提供五种类型的picker组件，如普通选择器，多列选择器，时间选择器，日期选择器和省市区选择器。

（猜测是，这些选择器时不同的且常用的某种类型，于是就产生固定的模版）。

而在写法上是这么写滴， <picker mode="multiSelector" 其他属性>

picker属性

picker组件需要记录当前选择，选择的可允许范围等等，而这些都是picker的一些相关的属性。

共同的属性

picker为用户提供了多个选择，但用户要从中选中其中一个，value就这样记载了用户当前选到的值。（它会初始化选择器的值）
picker为用户提供了多个选择，但有时为了构造选择器内容的方便，picker可能会提供超出服务方所能服务到的实际范围，于是在一些选择器中，可以用一些属性来限制用户的选择，使其锁定到实际范围内。
- 比如在时间选择器time中start表示一天内有效范围的开始，而end属性表示一天内有效时间范围内的结束。举个例子，拔牙建议是在早上来拔，如果写一个拔牙的预约系统，则可以用end="12:00"来限定结束时间。
picker为用户提供了多个选择，用户选了其中一种，但仍是需要有东西去告诉后台用户选了什么。于是就有了bindchange，代表说当用户选择了原选择不同的选择时，会触发的相应的函数。
- 因为微信小程序使用了数据绑定的技术，所以一般bindchange会修改在js文件里面对应的值。
- 数据绑定技术可以简单理解成一种从wxml文件获取到js文件中数据域中的某个数据的技术，如{{data}}

时间选择器time

wxml

<view class="section"><h2>时间选择器</h2><picker mode="time" value = "{{Time}}" start="9:00" end="12:00" bindchange="bind_ChangeTime">{{Time}}</picker>
</view>

js文件

Page({data:{Time:"9:00"},bind_ChangeTime:function(e){console.log(e.detail.value)this.setData({Time:e.detail.value})}
})

wxss

page{background-color: navy;
}
.section{text-align: center;
}
.section_title{display:flexbox;font-family:'Times New Roman', Times, serif;color: aliceblue;
}
.section_picker{
background-color: white;
}

参考

微信小程序官方文档

【微信小程序】选择器组件picker相关推荐

taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
微信小程序Demo组件大全（对话框、指示器、五星评分，画廊，影院座位……
微信小程序 - 自定义组件预览用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用组件的wxml结构请看src/components/下的组件样式文件可直接引用src ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序常用组件
欢迎体验个人小程序表情小作坊轻松定制表情包三连图文字转图片吃什么都行解决广大用户吃饭选择恐惧症的问题微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...
微信小程序之组件 —— 微信小程序教程系列（19）
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序UI组件的推荐以及使用
小编今天写一个微信小程序的界面,之前都是使用原声的编写页面,按照设计图编写.但是这次是编写一个微信小程序的时间选择器,让小编我自由发挥,没有设计稿(复杂的设计稿小编也是写不出来的,比如好看实用的时间选 ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...

【微信小程序】选择器组件picker

文章目录

【微信小程序】选择器组件picker

picker组件的定义

picker组件的类型

picker属性

共同的属性

时间选择器time

参考

【微信小程序】选择器组件picker相关推荐

最新文章

热门文章