在小程序的開發,會遇到時間選擇器,來供我們選擇起始時間和結束時間.
以此來篩選數據,得到該時間范圍內的數據.
首先做一個時間彈窗,用hidden來控制是否顯示.
我直接用.wpy后綴
<view class="weui-cells timePicker" hidden="{{timeBoxHidden}}" style="height:240rpx;">
<view class="weui-cell" style="">
<picker mode="date" value="{{dateStart}}" end="{{dateEnd}}" bindchange="bindDateStartChange">
<text space='nbsp'> 開始時間 {{dateStart}}></text>
</picker>
</view>
<view class="weui-cell" style="height:70rpx;">
<picker mode="date" value="{{dateEnd}}" start="{{dateStart}}" end="2018-10-10" bindchange="bindDateEndChange">
<text space='nbsp'> 結束時間 {{dateEnd}}></text>
</picker>
</view>
<view class="weui-cell" >
<button class="weui-btn weui-btn_primary" bindtap="cancelTime">重置</button>
<button class="weui-btn weui-btn_primaryTwo" bindtap="sureTime">確定</button>
</view>
</view>
js中去綁定數據
data = {
}
dateStart: '2018-09-10',
dateEnd: '2018-09-12',
articles: [ ]
如果想靠起始時間和結束時間來篩選數據
我試過在起始時間和結束時間綁定的事件中去調用接口,后來發現只能篩選除大於起始時間和小於結束時間的
而不能得到其中間的數據.
后來經過嘗試,便在確定綁定事件中去調用該接口.
sureTime(e) {
this.timeBoxHidden = true
this.fetch({
url:' ',
success: (data)=> {
let arr = []
data.datas.forEach((item) => {
if(item.applyTime >= this.dateStart && item.applyTime <= this.dateEnd ) {
arr.push(item)
}
})
//article 列表渲染的數據數組
this.articles = arr
}
})
this.scrollToUpper()
},
調用接口,我使用的是封裝的fetchAPI ,大家庫使用微信小程序本身的wx.request({}) 去獲取接口
這樣便就完成了,時間選擇器的一些操作