微信小程序 Utils丨Scrollview 實現橫向滑動時間選擇器

運行效果

涵蓋全 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;
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容