美文网首页
uniapp小程序获取时间戳转换时间

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

作者: 喜欢桉树叶 | 来源:发表于2020-05-21 18:53 被阅读0次

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

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()方法实现

 <script>
     export default {
         data() {
             return { 
                 itemFocus:[],
             }
         },
         onLoad() {
            this.getFocus();
         },
         methods: {
              happenTimeFun(num){//时间戳数据处理
                  let date = new Date(num * 1000);
                 //时间戳为10位需*1000,时间戳为13位的话不需乘1000
                 let y = date.getFullYear();
                 let MM = date.getMonth() + 1;
                 MM = MM < 10 ? ('0' + MM) : MM;//月补0
                 let d = date.getDate();
                 d = d < 10 ? ('0' + d) : d;//天补0
                 let h = date.getHours();
                 h = h < 10 ? ('0' + h) : h;//小时补0
                 let m = date.getMinutes();
                 m = m < 10 ? ('0' + m) : m;//分钟补0
                 let s = date.getSeconds();
                 s = s < 10 ? ('0' + s) : s;//秒补0
                 return y + '-' + MM + '-' + d; //年月日
                 //return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
             },
             getFocus(){
                 uni.request({
                     url:getApp().globalData.url + '/news/focus',
                     method:'get',
                     data:{},
                     success: (res) => {    
                        this.itemFocus = res.data.data.data;
                         this.itemFocus.forEach(item=>{
                             item.inputtime = this.happenTimeFun(item.inputtime)
                         })
                     }
                 })  
              },
            change(e) {
                 this.btnnum = e
             }
         }
     }
</script>

相关文章

网友评论

      本文标题:uniapp小程序获取时间戳转换时间

      本文链接:https://www.haomeiwen.com/subject/pamtahtx.html