uniapp页面加载数据

<template>

<!-- recommend.length>0防制出现undefined -->

<view v-if="recommend.length>0">

<view>

<view 

class = "recommend_item"

v-for="item in recommend"

:key="item.aid"

>

<!-- widthFix图片自适应 -->

<image mode="widthFix" :src="baseUrl+item.litpic" ></image>

</view>

</view>


<view>

<view>

<view>

<view>

<text>{{monthes.DD}}/</text>

{{monthes.MM}}月

</view>

<view>{{monthes.title}}</view>

</view>

<view>更多></view>

</view>

<view>

<view

v-for="item in monthes.items"

:key="item.aid"

>

<image :src="baseUrl+item.litpic" mode="aspectFill"></image>

</view>

</view>

</view>



</view>

</template>


<script>

import moment from "moment";

export default{

data(){

return{

recommend:[],

baseUrl:this.baseUrl,

monthes:[]

},

mounted(){

//console.log(moment(new Date()).format("YYYY"));

this.request({

url:"http://bj.sgmwppi.cn/xcx/blog/recommend",

data:{

type:"c",

skip:0

}

}).then(res=>{

//console.log(res);

if(res.mycode==1){

this.recommend=res.list;

this.monthes=res.list[0];

console.log(this.monthes.add_time);

this.monthes.MM=moment(this.monthes.add_time).format('MM');

this.monthes.DD=moment(this.monthes.add_time).format('DD');

this.monthes.title=res.list[0].title;

this.monthes.items = res.months;

//console.log(this.monthes);

}

})

}

}

</script>


<style>

.recommend_wrap{

display: flex;

flex-wrap: wrap;//换行

.recommend_item{

width: 50%;

border: 5rpx solid #fff;

}

}

.month_row{

.month_title{

display: flex;// 伸缩盒子

justify-content: space-between;//左右各留一部分

padding: 20rpx;

.month_title_info{


color:$color;

font-size: 30rpx;

font-weight: 600;

display: flex;



}

.month_text{

font-size: 34rpx;

color: #666;

margin-left: 30rpx;

}

}

.month_title_more{

font-size: 24rpx;

color: $color;

}

}

.month_content{

display: flex;

flex-wrap:wrap;

.month_item{

width: 33.3%;

border: 5rpx solid #fff;

}

}

</style>

uniapp页面加载数据(图1)

您可能还会对下面的文章感兴趣: