微信小程序时间标签和时间范围的联动效果


Posted in Javascript onFebruary 15, 2019

本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下

微信小程序时间标签和时间范围的联动效果

最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下。若有错误,请广大朋友们指正。

使用微信小程序组件radio-group、picker,用wxss对radio按照需求进行重构,picker里边的start和end时间是根据radio来显示的。将start、end时间放在data里,radio发生改变时,改变data中的时间。当picker中的值发生改变时,如果时间范围已经超出了radio中的范围,需要对radio的显示进行实时修改。

话不多说,接下来上代码。

index.wxml

<view class="con_screen">
 <text class="cons_ti">日期范围</text>
 <!-- 单选时间 -->
 <radio-group class="radio-group" bindchange="radioCheckedChange">
  <block >
  <label class="cons_radio {{radioCheckVal==1?'active':''}}" >
   <radio value="1" hidden="true"/>
   <text>今日</text>
  </label> 
  <label class="cons_radio {{radioCheckVal==4?'active':''}}" >
   <radio value="4" hidden="true" />
   <text>近7日</text>
  </label> 
  <label class="cons_radio {{radioCheckVal==6?'active':''}}" >
   <radio value="6" hidden="true"/>
   <text>近30日</text>
  </label>  
  </block>
 </radio-group>
 <!-- 时间段 -->
 <view class="picker_group">
  <picker mode="date" value="{{date}}" start="2015-09-01" end="{{date2}}" bindchange="bindDateChange">
  <view class="picker">
   {{date}}
   <image src="../../image/home_zsr_icon.png"></image>
  </view>
  </picker>
  到
  <picker mode="date" value="{{date2}}" start="{{date}}" end="2018-01-24" bindchange="bindDateChange2">
  <view class="picker">
   {{date2}}
   <image src="../../image/home_zsr_icon.png"></image>
  </view>
  </picker>  
 </view>
  
 </view>

index.wxss

.radio-group{
 display: inline-block;
}
.cons_radio{
 margin-left: 30rpx;
}
.cons_radio text{
 font-size: 26rpx;
 color: #c8c8c8;
 height: 40rpx;
 /* width: 93rpx; */
 border: #c8c8c8 solid 2rpx;
 padding:0 20rpx;
 text-align: center;
 line-height: 40rpx;
 display: inline-block;
 border-radius: 20rpx;
}
/* 黄色 */
.cons_radio.active text{
 color: #F5A623;
 border-color: #F5A623;
}
/* 红色 */
.cons_radio.activered text{
 color: #FA2B21;
 border-color: #FA2B21;
}
/* 蓝色 */
.cons_radio.activeblue text{
 color: #4AAFDD;
 border-color: #4AAFDD;
}
/* 黄绿色 */
.cons_radio.activeyg text{
 color: #BABC1A;
 border-color: #BABC1A;
}
 
/* 日期选择 */
.picker_group{
 display: block;
 font-size: 28rpx;
 color: #c8c8c8;
 margin-left: 20rpx;
 margin-top: 15rpx;
}
.picker_group picker{
 display: inline-block;
 margin:0 20rpx 0 20rpx;
 position: relative;
 color: #232323;
}
.picker_group picker image{
 width: 20rpx;
 height: 20rpx;
}
.cons_zsr{
 display: block;
 font-size: 32rpx;
 color: #232323;
 margin-left: 40rpx;
 margin-bottom: 15rpx;
}
.cons_zsr picker image{
 width: 30rpx;
 height: 30rpx;
}

index.js

Page({
 data:{
 page:'',
 Loading:false,
 isLogin:false,
 radioCheckVal:0,//收益占比单选
 date: '2015-09-01',//收益占比时间段起始时间
 date2:'2018-01-24',//收益占比时间段终止时间
 }, 
 // 收益占比单选时间 ring
 radioCheckedChange(e){ 
 let that=this; 
 that.setData({ 
  radioCheckVal:e.detail.value 
 }) 
 console.log(that.data.radioCheckVal)
 if(that.data.radioCheckVal=='1'){
  that.setData({
  date:timedate.formatDate(now),
  date2:timedate.formatDate(now),
  })
  // console.log(that.data.date+'------'+that.data.date2)
  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2)
 }
 if(that.data.radioCheckVal=='4'){
  that.setData({
  date:timedate.sevenDays().t2,
  date2:timedate.sevenDays().t1,
  })
  // console.log(that.data.date+'------'+that.data.date2)
  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2)
 }
 if(that.data.radioCheckVal=='6'){
  that.setData({
  date:timedate.thirtyDays().t2,
  date2:timedate.thirtyDays().t1,
  })
  // console.log(that.data.date+'------'+that.data.date2)
  that.timeFn(that.data.arrayindex,that.data.date,that.data.date2)
 }
 },
 // 收益占比时间段选择
 bindDateChange(e){
 let that=this;
 console.log(e.detail.value)
 that.setData({
  date: e.detail.value,
  radioCheckVal:0,
 })
 that.timeFn(that.data.arrayindex,that.data.date,that.data.date2)
 },
 bindDateChange2(e){
 let that=this;
 that.setData({
  date2: e.detail.value,
  radioCheckVal:0,
 })
 that.timeFn2(that.data.arrayindex,that.data.date,that.data.date2)
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获取元素CSS样式代码示例
Nov 28 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
React中Ref 的使用方法详解
Apr 28 Javascript
微信小程序实现商品属性联动选择
Feb 15 #Javascript
微信小程序实现购物页面左右联动
Feb 15 #Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 #jQuery
You might like
消息持续发送的完整例子
2006/10/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
强制设为首页代码
2006/06/19 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Django中Middleware中的函数详解
2019/07/18 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python能自学吗
2020/06/18 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
销售员岗位职责范本
2014/02/03 职场文书
小学生读书感言
2014/02/12 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
公司授权委托书范本
2014/09/18 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
新兵入伍决心书
2015/09/22 职场文书
课改心得体会范文
2016/01/25 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang