首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序丨横向滑动 Scrollview 时间选择器

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

作者头像
码脑
发布2019-09-27 11:19:03
1.6K1
发布2019-09-27 11:19:03
举报
文章被收录于专栏:大前端大前端

运行效果

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.09.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 运行效果
  • JS
  • WXML
  • WXSS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档