微信小程序滚动选择器(时间日期)详解及实例代码

2024-09-30 11:04:36

微信小程序滚动选择器(时间日期)详解

微信小程序自己封装了很多控件，用起来确实很方便，如果这是Android里面，还需要自己去定义，不废话，效果图：

一起来看看怎么实现的呢？看完你应该就该说，尼玛，这就行啦….

这个效果呢，要用到picker组件，动画从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

看下相应的属性：

具体的来看看代码，布局:

<view class="section" >
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector">
  <view class="picker">
   国家：{{objectArray[index]}}
  </view>
 </picker>
</view> 

<view class="section">
 <picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
  <view class="picker">
   时间 : {{times}}
  </view>
 </picker>
</view>
<view class="section">
 <picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange">
  <view class="picker">
   日期: {{dates}}
  </view>
 </picker>
</view>

css样式:

.section{
  background:#CABBC7;
  margin:20rpx;
  padding:20rpx

}

js代码：

Page({
 data: {
  dates: '2016-11-08',
  times: '12:00',
  objectArray: ['中国', '英国', '美国'],
  index: 0,
 },
 // 点击时间组件确定事件
 bindTimeChange: function (e) {
  console.log("谁哦按")
  this.setData({
   times: e.detail.value
  })
 },
 // 点击日期组件确定事件
 bindDateChange: function (e) {
   console.log(e.detail.value)
  this.setData({
   dates: e.detail.value
  })
 },
 // 点击城市组件确定事件
 bindPickerChange: function (e) {
   console.log(e.detail.value)
  this.setData({
   index: e.detail.value
  })
 }

代码很简单，分别绑定事件，点击切换就Ok。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序实现自定义picker选择器弹窗内容

微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo
微信小程序日期选择器实例代码

/* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu
微信小程序之picker日期和时间选择器

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

日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器今天给大家带来一个自定义的时间选择器,废话不多说,直接上代码第一步:先创建一个picker的文件夹第二步 :在wxml中写布局样式  <view class="full-box {{isOpen?'cur':''}}"> <!--<view class="modal" bindtap
微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码:  const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,
微信小程序选择器（时间，日期，地区）实例详解

微信小程序选择器(时间,日期,地区) 微信小程序开发由于本人最近学习微信小程序的开发,根据自己的实践结果整理了下结果,对日期选择器,时间选择器,地区选择器做的实例,有不对的地方,希望大家指正. 用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: 上代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', ti
微信小程序switch开关选择器使用详解

本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b
微信小程序日期时间选择器使用方法

本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}
微信小程序如何实现精确的日期时间选择器

这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成. 处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bi
微信小程序三级联动选择器使用方法

本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下效果图实现原理利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

微信小程序 滚动选择器(时间日期)详解及实例代码

相关推荐

随机推荐

微信小程序滚动选择器(时间日期)详解及实例代码