一: wxml:

<view class="navbarlift" style="background:#ffffff;padding:20rpx">
      <picker mode="date" value="{{date}}" start="2010-09-01" end="2020-09-01" bindchange="bindDateChange">
        <view class="picker">
          {{date}}
          <image style="height:20rpx;width:20rpx" src="pic/日期.png"></image>
        </view>
      </picker>
    </view>

wcss:

.picker{
  float:left;
  margin-left: -10rpx;
  margin-top: -20rpx;
  margin-bottom: -20rpx;

}

.navbarlift
{
  float:left;
  margin-left: 20rpx;
  margin-top: 20rpx;
  border:1px solid rgba(0, 0, 0, 0.2);
}

js:

//  点击日期组件确定事件  
  bindDateChange: function (e) {
    var that = this;
    this.setData({
      date: e.detail.value,
    });}

ui:

二:wxml

<view class="navbarlift" style="background:#ffffff;padding:20rpx;margin-right:20rpx;">
        <picker mode="date" value="{{date}}" start="2010-09-01" end="2020-09-01" bindchange="bindDateChange"style="margin-top:-8rpx">
          <view class="picker" style="">
          {{date}}
          <image src="../../../images/日期.png" style="width:40rpx;height:40rpx;float:right"></image>
          </view>
        </picker>
        
      </view>

wcss:

/*日期选择组件样式*/
.picker{
  margin-left: 250rpx;
  margin-bottom: -12rpx;
  align-items: center;
}
.navbarlift
{
  margin-left: 20rpx;
  margin-top: 20rpx;
  border:1px solid rgba(255, 255, 0, 0.2);
}

js:

//  点击日期组件确定事件  
  bindDateChange: function (e) {
    var that = this;
    that.setData({
      date: e.detail.value,
      currentTab: 4
    });}

UI:

微信小程序开发之日期组件的更多相关文章

  1. 微信小程序开发05-日历组件的实现

    接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...

  2. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  3. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  4. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  5. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  6. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  7. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  8. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  9. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

随机推荐

  1. 五个知识体系之-SQL语句大全

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  2. 【题解】Coins(二进制拆分+bitset)

    [题解]Coins(二进制拆分+bitset) [vj] 俗话说得好,bitset大法吼啊 这道题要不是他多组数据卡死了我复杂度算出来等于九千多万的选手我还不会想这种好办法233 考虑转移的实质是怎样 ...

  3. ruby 字符串

    字符串处理函数 1.返回字符串的长度 str.length => integer 2.判断字符串中是否包含另一个串 str.include? other_str => true or fa ...

  4. PHP echo() 函数

    实例 输出文本: <?php echo "Hello world!"; ?> 定义和用法 echo() 函数输出一个或多个字符串. 注释:echo() 函数实际不是一个 ...

  5. LVS与Keepalived

    lvs与Nginx区别 LVS的负载能力强,因为其工作方式逻辑非常简单,仅进行请求分发,而且工作在网络的第4层,没有流量,所以其效率不需要有过多的忧虑. LVS基本能支持所有应用,因为工作在第4层,所 ...

  6. 1--单独使用jdbc开发问题总结

    1.数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能. 设想:使用数据库连接池管理数据库连接. 2.将sql语句硬编码到java代码中,如 ...

  7. python的上下文管理器

    直接上代码: f = open('123.txt','w') try: f.write('hello world') except Exception: pass finally: f.close() ...

  8. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  9. python3 - 写一个生成双色球号码的一个程序,生成的号码写到文件里面

    写一个生成双色球号码的一个程序,生成的号码写到文件里面 # 中奖号码由6个红色球号码和1个蓝色球号码组成 # 篮球范围:01-16 # 红球范围:01-33 def swq(num): random. ...

  10. svn安装以及汉化过程

    第一步 下载svn地址 https://tortoisesvn.net/downloads.html 第二步一路next 最后finish 完成 就是完成svn的流程 第三步就是安装语言包 安装包语言 ...