uniapp页面布局

<template>

<view>

<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>

</template>


<script>

export default{

data(){

return{

recommend:[],

baseUrl:this.baseUrl

},

mounted(){

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;

}

})

}

}

</script>


<style>

.recommend_wrap{

display: flex;

flex-wrap: wrap;//换行

.recommend_item{

width: 50%;

border: 5rpx solid #fff;

}

}

</style>

uniapp页面布局(图1)

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