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

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

使用微信小程序组件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',//收益占比时间段终止时间}, // 收益占比单选时间  ringradioCheckedChange(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)},

微信小程序时间标签和时间范围的联动相关推荐

微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序蓝牙标签打印/标签云打印开放平台（2）
微信小程序蓝牙标签打印/标签云打印开放云平台(下面简称"平台" www.herro.cn 技术服务TEL:15759216805),支持开发者通过API调用完成标签蓝牙打印或标签云 ...
image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
标签云打印/微信小程序蓝牙标签打印开放平台功能
微信小程序蓝牙标签打印/标签云打印开放平台(www.herro.cn),是在云端部署的云平台,支持开发者通过API调用完成标签蓝牙打印或标签云打印功能. 平台蓝牙打印模块支持各厂商各品牌蓝牙标签打印 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
taro微信小程序时间组件picker的使用--省市区三级联动
微信小程序时间组件实现三级联动项目技术手段支撑 taro+react+scss实现的微信小程序 Picker使用说明相信大家在微信小程序开放文档里面已经学会了使用组件picker实现时间,和单列组 ...

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

微信小程序时间标签和时间范围的联动相关推荐

最新文章

热门文章