微信小程序时间标签与范围联动设计实现? 最近忙于一个有关数据管理的微信小程序开发 http://www.hsccxt.com/ , 遇到了上图情况, 虽然很简单, 还是整理一下. 若有错误, 请广大朋友们指正.
使用微信小程序组件 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)
- },
来源: http://www.bubuko.com/infodetail-2964260.html