一: 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. SAP增强 和VA01相关增强点介绍

    -转 sap寻找用户出口方法 sap的用户出口总共有三代: 一.User EXIT 第一代的用户出口,它们include在SAP标准程序的源代码里,可以说他们是源代码的一部分,你改了这种出口就相当于改 ...

  2. sql性能分析语句

    SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical_reads N'物理读取总次数' ,tota ...

  3. ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found

    源:ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found 用了网上很多方法,最后是用这个网友的方法解决的,在此做个记录. VS2010编写WebService与在IIS ...

  4. RK平台images打包细则【转】

    本文转载自;https://blog.csdn.net/wangxueming/article/details/52808739 IMGs打包细节 平台: RK3288 背景: RK3288编译产生了 ...

  5. <JAVA8新增内容>关于匿名内部集合和lambda表达式

    要想说清楚JAVA中的Lambda表达式,必须想讲一下匿名内部类来帮助理解本质. 一.匿名内部类 匿名内部类适合创建那种只需要一次使用的类,例如前面介绍命令模式时所需要的Command对象,匿名内部类 ...

  6. blog首页视图

    声明:此Django分类下的教程是追梦人物所有,地址http://www.jianshu.com/u/f0c09f959299,本人写在此只是为了巩固复习使用 django 是如何处理 http 请求 ...

  7. React之jsx语法特性

    jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...

  8. 大数据- 自定义Log4j日记

    1.新建一个java project,在src下新建一个lib文件夹和 rescources 文件夹,resources文件夹不能命名错误. 点击File——>project Structure ...

  9. base64编码方式

    一.编码的两大方式: 在python3.x中,字符串编码分为unicode和bytes两大类编码方式. 直接书写s='中国人',这种方式定义的编码方式为unicode,是通用的方式. 另一种是byte ...

  10. 基类的两个派生类再派生一个派生类 用virtual避免二义性

    class vehicle{ int MaxSpeed; int Weight;public: vehicle(int maxspeed, int weight) :MaxSpeed(maxspeed ...