運行效果
涵蓋全 24 個時段,左右滑動可見其它。當前時段提示為【搶購進行中】,之前時段為【已開搶】,之后時段為【即將開始】
JS
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
that = this;
that.setData({
timeList: that.initTimeList(24)
})
},
/**
* 時段數組生成
* @param itemNum 需要的時段數量
*
* return 生成的完整數組
*/
initTimeList:function(itemNum){
// 基礎判斷
if (itemNum <= 0){
console.log(' Error From initTimeList():所需時段數不可小于等于零')
return []
}
// 當前時段
var nowTime = new Date().getHours()
// 組裝數組
var timeList = []
for (var t = 0; t < itemNum ; t++){
t > 9 ? (timeList.push({ 'index': t, 'time': t + ':00', 'hint': (t == nowTime ? '搶購進行中' : (t > nowTime ? '即將開始' : '已開搶')) })) : (timeList.push({ 'index': t, 'time': '0' + t + ":00", 'hint': (t == nowTime ? '搶購進行中' : (t > nowTime ? '即將開始' : '已開搶')) }))
}
return timeList
},
/**
* 時間選擇器列表點擊監聽
* @param item 被點擊的item對象,包含所有信息
*/
clickItem:function(item){
// 列表點擊事件
console.log(item.currentTarget.dataset.item.index)
}
WXML
<scroll-view scroll-x class="scroll-x">
<view wx:for="{{timeList}}" wx:key="{{index}}" class="view_item" >
<view class="view_item_time" bindtap="clickItem" data-item="{{item}}">{{item.time}}</view>
<view class="view_item_hint" bindtap="clickItem" data-item="{{item}}">{{item.hint}}</view>
</view>
</scroll-view>
WXSS
.scroll-x{
white-space:nowrap;
display:flex;
background: #333;
}
.view_item{
display:inline-block;
padding: 20rpx;
}
.view_item_time{
width:100rpx;
height:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:0.8rem;
color:#FFFFFF;
background:#000;
}
.view_item_hint{
width:100rpx;
height:50rpx;
display:flex;
align-items:center;
justify-content:center;
font-size:0.5rem;
color:#FFFFFF;
background:#000;
}
/* 隱藏scrollbar */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}