微信小程序开发之日期组件
一: 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:
微信小程序开发之日期组件的更多相关文章
- 微信小程序开发05-日历组件的实现
接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是 ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 微信小程序开发03-这是一个组件
编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发教程 #043 - 在小程序开发中使用 npm
本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...
随机推荐
- SAP增强 和VA01相关增强点介绍
-转 sap寻找用户出口方法 sap的用户出口总共有三代: 一.User EXIT 第一代的用户出口,它们include在SAP标准程序的源代码里,可以说他们是源代码的一部分,你改了这种出口就相当于改 ...
- sql性能分析语句
SELECT creation_time N'语句编译时间' ,last_execution_time N'上次执行时间' ,total_physical_reads N'物理读取总次数' ,tota ...
- ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found
源:ASP.Net .Net4.0 HTTP 错误 404.17 - Not Found 用了网上很多方法,最后是用这个网友的方法解决的,在此做个记录. VS2010编写WebService与在IIS ...
- RK平台images打包细则【转】
本文转载自;https://blog.csdn.net/wangxueming/article/details/52808739 IMGs打包细节 平台: RK3288 背景: RK3288编译产生了 ...
- <JAVA8新增内容>关于匿名内部集合和lambda表达式
要想说清楚JAVA中的Lambda表达式,必须想讲一下匿名内部类来帮助理解本质. 一.匿名内部类 匿名内部类适合创建那种只需要一次使用的类,例如前面介绍命令模式时所需要的Command对象,匿名内部类 ...
- blog首页视图
声明:此Django分类下的教程是追梦人物所有,地址http://www.jianshu.com/u/f0c09f959299,本人写在此只是为了巩固复习使用 django 是如何处理 http 请求 ...
- React之jsx语法特性
jsx 语法,直接可以在js中使用html标签. 还可以通过花括号的形式,在html标签中,写js表达式. <div> { 1 + 2 } hello,world! </div> ...
- 大数据- 自定义Log4j日记
1.新建一个java project,在src下新建一个lib文件夹和 rescources 文件夹,resources文件夹不能命名错误. 点击File——>project Structure ...
- base64编码方式
一.编码的两大方式: 在python3.x中,字符串编码分为unicode和bytes两大类编码方式. 直接书写s='中国人',这种方式定义的编码方式为unicode,是通用的方式. 另一种是byte ...
- 基类的两个派生类再派生一个派生类 用virtual避免二义性
class vehicle{ int MaxSpeed; int Weight;public: vehicle(int maxspeed, int weight) :MaxSpeed(maxspeed ...