微信小程序时间标签和时间范围的联动效果
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序时间标签和时间范围的联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下
最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下。若有错误,请广大朋友们指正。
使用微信小程序组件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-: 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) },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:微信小程序实现展示评分结果功能
下一篇:微信小程序实现商品属性联动选择
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南