uniapp小程序获取时间戳转换时间例子

日常开发中经常会遇到时间相关的问题,服务端返回的数据都是以时间戳的方式,那么需要将其处理转化为对应的时间格式,具体方式如下:

HTML:

<view class="today-focus">
      <view class="content-view">
            <view class="article-item" v-for="item in itemFocus">
                  <view class="article-img"><image :src="item.thumb"></image></view>
                  <view class="article-con">
                        <view class="article-title">{{item.title}}</view>
                        <view class="article-description">
                            <view class="time">{{item.inputtime}}</view>
                            <view class="source">{{item.catname}}</view>
                            <view class="read-num"><image src="../../static/images/read-icon.png"></image>{{item.listorder}}</view>
                        </view>
                  </view>
            </view>    
     </view>    
</view>

  css:

.today-focus{
    background-color: #f4f3f3;
    margin-top:20rpx;
    width: 750rpx;
}
.today-tit{
    color: #e70c0c;
    font-size: 38rpx;
    border-bottom:1rpx #cccccc solid;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 550;
}
.article-item{
    height: 187rpx;
    border-bottom: 1rpx #cccccc solid;
    margin-top:30rpx;
}
.article-img image{
    width: 230rpx;
    height: 156rpx;
    float: left;
}
.article-con{
    float: left;
    width: 460rpx;
    height: 156rpx;
    margin-left:20rpx;
}
.article-title{
    font-size: 30rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-description{
    font-size: 24rpx;
    margin-top:38rpx;
    color: #b0b0b0;
}
.time{
    float: left;
    }
.source{
    float: left;
    border-radius: 5rpx;
    border:1rpx #ed6c00 solid;
    color: #ed6c00;
    width: 100rpx;
    text-align: center;
    height:38rpx;
    line-height: 38rpx;
    margin-left:20rpx;
}
.read-num{
    float: right;
}
.read-num image{
    width: 22rpx;
    height: 15rpx;
    margin-right:10rpx;
}

script:     happenTimeFun()方法实现

 1 <script>
 3     export default {
 4         data() {
 5             return {  
itemFocus:[], 13 } 14 }, 15 onLoad() {
this.getFocus();
},
21 methods: {
happenTimeFun(num){//时间戳数据处理 36 let date = new Date(num * 1000); 37 //时间戳为10位需*1000,时间戳为13位的话不需乘1000 38     let y = date.getFullYear(); 39     let MM = date.getMonth() + 1; 40     MM = MM < 10 ? ('0' + MM) : MM;//月补0 41     let d = date.getDate(); 42     d = d < 10 ? ('0' + d) : d;//天补0 43     let h = date.getHours(); 44     h = h < 10 ? ('0' + h) : h;//小时补0 45     let m = date.getMinutes(); 46     m = m < 10 ? ('0' + m) : m;//分钟补0 47     let s = date.getSeconds(); 48     s = s < 10 ? ('0' + s) : s;//秒补0 49 return y + '-' + MM + '-' + d; //年月日 50     //return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒 51 },
getFocus(){
63 uni.request({ 64 url:getApp().globalData.url + '/news/focus', 65 method:'get', 66 data:{}, 67 success: (res) => { 68 this.itemFocus = res.data.data.data; 69 this.itemFocus.forEach(item=>{ 70 item.inputtime = this.happenTimeFun(item.inputtime) 71 }) 72 } 73 }) 74 },
change(e) { 94 this.btnnum = e 95 } 96 } 97 } 98 </script>

 

posted @ 2020-05-21 18:10  WEB前端—随手笔记  阅读(5143)  评论(1编辑  收藏  举报