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


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 相关文章推荐
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
微信小程序解析富文本过程详解
Jul 13 Javascript
简述ES6新增关键字let与var的区别
Aug 23 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
php中iconv函数使用方法
2008/05/24 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
Three.js学习之网格
2016/08/10 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
python中偏函数partial用法实例分析
2015/07/08 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python如何计算语句执行时间
2019/11/22 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python实现三壶谜题的示例详解
2020/11/02 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
初中成绩单评语
2014/12/29 职场文书
Python 键盘事件详解
2021/11/11 Python