微信小程序丨横向滑动 Scrollview 时间选择器
- 2019 年 10 月 8 日
- 笔记
运行效果
涵盖全 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; }
