微信小程序時間標籤與範圍聯動設計實現

微信小程序時間標籤與範圍聯動設計實現？最近忙於一個有關數據管理的微信小程序開發，遇到了上圖狀況，雖然很簡單，仍是整理一下。如有錯誤，請廣大朋友們指正。

使用微信小程序組件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) },