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


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 相关文章推荐
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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+DBM的同学录程序(3)
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP查询快递信息的方法
2015/03/07 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python概率计算器实例分析
2015/03/25 Python
详解python的四种内置数据结构
2019/03/19 Python
python实现打砖块游戏
2020/02/25 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
我们的节日清明节活动方案
2014/03/05 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
教师业务学习材料
2014/12/16 职场文书
质量保证书怎么写
2015/02/27 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
Python函数式编程中itertools模块详解
2021/09/15 Python