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


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各种复制代码收集
Sep 20 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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的4种常见运行方式
2015/03/20 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
2014年综治宣传月活动总结
2014/04/28 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年中秋节活动总结
2015/03/23 职场文书