微信小程序 Utils丨Scrollview 实现横向滑动时间选择器

最新推荐文章于 2024-07-16 10:04:01 发布

MobMsg

最新推荐文章于 2024-07-16 10:04:01 发布

阅读量820

点赞数 2

本文链接：https://blog.csdn.net/qq_15609303/article/details/102426020

版权

本文介绍了如何在微信小程序中使用 Scrollview 创建一个横向滑动的时间选择器，覆盖全天24小时，不同时间状态清晰标识，支持左右滑动切换时段。

摘要由CSDN通过智能技术生成

运行效果

涵盖全 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 < itemN