微信小程序实现倒计时,苹果手机不显示
2018-07-26 13:15
911 查看
JS页面代码段:
[code]const app = getApp() let goodsList = [ { actEndTime: '2018-07-21 21:00:34' }, { actEndTime: '2028-07-17 21:00:37' }, { actEndTime: '2018-09-21 05:00:59' }, { actEndTime: '2018-08-19 07:00:48' }, { actEndTime: '2018-08-28 03:00:11' } ] Page({ data: { countDownList: [], actEndTimeList: [] }, onLoad: function () { let endTimeList = []; // 将活动的结束时间参数提成一个单独的数组,方便操作 goodsList.forEach(o => { endTimeList.push(o.actEndTime) }) this.setData({ actEndTimeList: endTimeList }); // 执行倒计时函数 this.countDown(); }, //当时间小于两位数时十位数补零。 timeFormat: function (param) {//小于10的格式化函数 return param < 10 ? '0' + param : param; }, //倒计时函数 countDown: function () { // 获取当前时间,同时得到活动结束时间数组 let newTime = new Date().getTime();//当前时间 let endTimeList = this.data.actEndTimeList;//结束时间的数组集合 let countDownArr = [];//初始化倒计时数组 // 对结束时间进行处理渲染到页面 endTimeList.forEach(o => { let endTime = new Date(o).getTime(); let obj = null; // 如果活动未结束,对时间进行处理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 获取天、时、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) } } else {//活动已结束,全部设置为'00' obj = { day: '00', hou: '00', min: '00', sec: '00' } } countDownArr.push(obj); }) //每隔一秒执行一次倒计时函数, 渲染 this.setData({ countDownList: countDownArr }) setTimeout(this.countDown, 1000); } })
wxml页面代码段
[code]<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList"> 距结束 <text class='tui-conutdown-box'>{{item.day}}</text>天 <text class='tui-conutdown-box'>{{item.hou}}</text>时 <text class='tui-conutdown-box'>{{item.min}}</text>分 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒 </view>
wxss页面代码段
[code]page{ background: #f5f5f5; } .tui-countdown-content{ height: 50px; line-height: 50px; text-align: center; background-color: #fff; margin-top: 15px; padding: 0 15px; font-size: 18px; } .tui-conutdown-box{ display: inline-block; height: 26px; width: 26px; line-height: 26px; text-align: center; background:#ccc; color: #000; margin: 0 5px; } .tui-countdown-bg{ background: red; color: #fff; } .container{ width: 100%; display: flex; justify-content: center; } .backView{ width:690rpx; background: #fff; display: flex; flex-direction: column; margin-bottom: 30rpx; } .createDate { background: #f5f5f5; padding:15rpx 15rpx 10rpx 15rpx; line-height: 50rpx; font-size: 28rpx; color: gainsboro; text-align: center; } .backViewitem1{ display: flex; flex-direction: row; height: 55rpx; align-items: center; padding:8rpx 40rpx; border-bottom: 2rpx solid #f5f5f5; } .ico { width:35rpx; height:35rpx; } .name { color: #c13176; margin-left: 20rpx; font-size: 28rpx; } .details { font-size:24rpx; letter-spacing: 2rpx; } .backViewitem2{ display: flex; flex-direction: row; line-height: 35rpx; min-height: 70rpx; padding: 15rpx 40rpx 10rpx 40rpx; border-bottom: 2rpx solid #f5f5f5; } .details1 { color:#888; font-size:23rpx; letter-spacing: 2rpx; }
阅读更多
相关文章推荐
- 微信小程序实现倒计时调用相机自动拍照功能
- 微信小程序 倒计时组件实现代码
- 微信端用原生代码实现视频播放(苹果手机与安卓手机有点差异)
- 微信小程序倒计时功能实现代码
- 微信小程序实现image组件图片自适应宽度比例显示的方法
- 微信小程序cover-image手机上不显示问题
- 微信小程序电商常用倒计时实现实例
- 微信小程序对cover-view标签设置border没效果(手机不显示)
- 微信小程序 实现动态显示和隐藏某个控件
- SQLite DBRecovery 恢复引擎实现微信等苹果手机一些聊天工具删除记录的快速恢复
- 微信小程序实现指定显示行数多余文字去掉用省略号代替
- 微信小程序的背景图片在手机上不显示?
- 微信小程序中,背景上下滑动影响样式(苹果手机)
- 微信小程序使用progress组件实现显示进度功能【附源码下载】
- 微信小程序点击实现隐藏和点击实现显示
- 微信小程序中显示倒计时
- 安卓(Android)+苹果(Ios)仿微信、陌陌 移动社交APP系统源码,手机IM聊天软件源码,企业即时通讯APP程序源码
- 微信JS-SDK图片预览在苹果手机里不显示或一直显示加载菊花
- 微信小程序实现验证码获取倒计时效果
- 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)