微信小程序（十八）picker组件详细介绍

2024-08-01 19:03:57

picker选择器分为三种，普通选择器，时间选择器，日期选择器用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！

主要属性：

普通选择器

时间选择器

日期选择器

wxml

<view>普通选择器</view>
<!--mode默认selector range数据源value选择的index bindchange事件监听-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
 <text>{{array[index]}}</text>
</picker>

<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
 <text>{{time}}</text>
</picker>

<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
 <text>{{date}}</text>
</picker>

Page({
 data:{
 // text:"这是一个页面"
 array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
 index: 0,
 time: '08:30',
 date: '2016-09-26'
 },

 /**
 * 监听普通picker选择器
 */
 listenerPickerSelected: function(e) {
  //改变index值，通过setData()方法重绘界面
  this.setData({
  index: e.detail.value
  });
 }, 

 /**
 * 监听时间picker选择器
 */
 listenerTimePickerSelected: function(e) {
  //调用setData()重新绘制
  this.setData({
   time: e.detail.value,
  });
 },

 /**
 * 监听日期picker选择器
 */
 listenerDatePickerSelected:function(e) {
 this.setDate({
  date: e.detail.value
 })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

相关文章：

hello WeApp                    icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                         picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                       slider组件                            Image组件

微信小程序 picker 组件详解及简单实例

微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器普通选择器:mode=
微信小程序之picker日期和时间选择器

下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te
微信小程序 picker-view 组件详解及简单实例

picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器属性名类型默认值说明 value Number Array 数组中的数字依次表示 picker-view 内的 picker
微信小程序使用picker封装省市区三级联动实例代码

微信小程序使用picker封装省市区三级联动实例目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法
微信小程序实战实例开发流程详细介绍

前言: 微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享, 前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质.HTTPS.审核. 先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过.什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快. 至于为什么现在选择开发小程序,原因很简单,尝尝鲜! 学习
微信小程序（六）模块化详细介绍

模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //获取时分秒 var hour = date.getH
微信小程序（七）数据绑定详细介绍

数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里先记录下 data.wxml  <view>{{message}}</view>  <view id="item-{{id}}">组件属性</view&g
微信小程序接入vant Weapp组件的详细步骤

刚创建的项目的文件结构首先在你项目的根目录下打开终端,输入npm init 对项目初始化这时会生成pachage.json文件. 继续在终端运行以下命令我这里用这个: npm i vant-weapp -S --production 运行完如图所示: 安装成功后回到小程序开发工具点击工具 => 构建npm 运行完截图: 完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件.比如你想在fundIncome页面内使用button组件. 效果: 上
微信小程序页面调用自定义组件内的事件详解

这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent&quo
微信小程序下拉框组件使用方法详解

本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me
微信小程序常用视图容器组件使用详解

目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称属性="值">内容<
微信小程序实现自定义弹窗组件的示例代码

目录编写组件代码 Dialog.wxml Dialog.js Dialog.wxss 调用自定义组件上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件. 首先,放一下,最终的效果图: 这是我们最后要实现的效果那么,首先,我们创建一个组件新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wx
微信小程序自定义时间段picker选择器

本文实例为大家分享了微信小程序自定义时间段picker选择器的具体代码,供大家参考,具体内容如下想实现一个可以选择年份和时间段的日期选择器,如下所示微信小程序自带的picker组件虽然能实现如上的内容,但不能实现样式的修改,不太符合小程序的设计主题,所以考虑了以下两种方法来实现如上的设计. 1.自定义date-picker 把要实现的date-picker封装为一个组件,组件内套用小程序自带的picker-view组件,其中picker_view-column表示不同的选择列,这样可以方便地
微信小程序实现文章关注功能详细流程

目录 1 数据源设计 1.1 文章数据源 1.2 关注数据源 2 录入测试数据 3 创建应用 4 首页功能实现 5 详情页功能实现 6 获取用户的openid 7 设置关注的低码方法 8 发布预览 9 总结 1 数据源设计低代码工具分为模型驱动和表单驱动两种类型,微搭低代码属于模型驱动的低码工具.所谓模型驱动就是要先设计数据源,设计数据源之间的关系.我们分析一下关系是什么,应该有一个文章的数据源,还有一个关注的数据源.文章和关注之间的关系是一对多的关系,所谓的一对多是指一篇文章可以被多个人进行

微信小程序 （十八）picker组件详细介绍

相关推荐

随机推荐

微信小程序（十八）picker组件详细介绍