一、需求：
制作一个类似于某博的用户发布文章&动态的一个app页面，
这篇文章里面主要是讲头像至用户点赞评论这些板块的制作
二、效果图：
先看下效果图
思路：
首先，把这个页面分成4个板块（如下图），然后用一个大盒子（父盒子）进行包裹
1.大盒子处：
我们可以看到效果图左右是有边距的，
那在父盒子这里就需要设置宽度以及边距了，不需要设置高度
width:750rpx;
magin: 25rpx auto; （这里的25rpx是指距离顶部有25rpx）
2.头像签名板块：
用一个子盒子进行包裹可再细分为3个板块（头像、签名、按钮），
再使用弹性布局进行排列顺序，里面的用户名加等级图标板块也是用弹性布局就可以，
里面的一个小技巧是，
最后一个按钮需要靠右显示，那只需要在按钮里面加上margin-left:auto；
tip：如果想要用了弹性布局的父盒子里面的最后一个子盒子靠右显示，可以用
.父盒子的类名：last-child {
margin-left:auto；
}
//头像板块
<u-avatar :src="item.src" mode="circle"
:show-level="true" level-bg-color="#25AFA2" class="head-img">
</u-avatar>
//签名板块
<view class="like-meg">
<view class="like-meg-info"> //这个是用户名加等级图标板块
<view class="like-meg-title">{{item.name}}</view>
<image class="like-meg-item" :src="item.grade"></image>
</view>
<view class="like-meg-tip">{{item.tip}}</view>
</view>
//按钮板块
<view class="like-botton">+收藏</view>
3.文章内容板块：正常排列就可以了
4.图片板块+点赞评论板块：
这里面就涉及到v-for嵌套式渲染，通常我们都只会先写出一个，
通过v-for的方式，再进行渲染，
我们可以看出，头像签名板块+文章内容板块 ，这些板块的内容，
我们只需要通过一次渲染就可以得到，
而我们的图片板块+评论点赞数据板块，就要再进行另外一次渲染，具体要怎么来写呢？
源码示例：
<template>
<view>
<!-- 页面顶部导航栏 -->
<view>
<u-navbar title="我的赞" title-color="#25AFA2"
back-icon-name="nav-back" back-icon-color="#25AFA2"
back-text="返回"></u-navbar>
</view>
<!-- 切换赞&收藏版块 -->
<view>
<u-sticky>
<!-- 只能有一个根元素 -->
<u-tabs name="cate_name" :list="list" :is-scroll="false"
:current="current" @change="change"
inactive-color="#999999" active-color="#25AFA2"></u-tabs>
</u-sticky>
</view>
<view class="user-like-info" v-for="(item,index) in articleList">
<view class="uer-line"></view>
<!-- 用户头像、昵称、版块 -->
<view class="like-artive">
<u-avatar :src="item.src" mode="circle" :show-level="true" level-bg-
color="#25AFA2" class="head-img">
</u-avatar>
<view class="like-meg">
<view class="like-meg-info">
<view class="like-meg-title">{{item.name}}</view>
<image class="like-meg-item" :src="item.grade"></image>
</view>
<view class="like-meg-tip">{{item.tip}}</view>
</view>
<view class="like-botton">+收藏</view>
</view>
<!-- 文章发布内容 -->
<view class="like-content">{{item.mag}}</view>
<view class="like-photo">
<!-- 发布文章时的图片 -->
<view class="like-photo-item" v-for="(imagesSrc,i) in item.pic">
<image :src="imagesSrc"></image>
</view>
</view>
<!-- 评论点赞板块 -->
<view class="like-data">
<view class="like-data-item" v-for="(itemicon,i) in item.icon">
<image class="like-data-icon" :src="itemicon.src"></image>
<view class="like-data-num">{{itemicon.num}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
cate_name: '赞'
},
{
cate_name: '收藏'
},
],
current: '0',
articleList: [{
src: 'https://up.enterdesk.com/edpic/2e/78
/97/2e7897af2087369fbbdf5d0337647489.jpg',
name: '提',
grade: '/static/mine/head/grade.png',
tip: '提港风个性签名...',
mag: '“你们谎话连篇还以为没人会知道，但有两个人会知道。
你们的上帝。还有赫尔克里·波洛。”',
icon: [{
src: '/static/mine/like/forward.png',
num: '2234235'
},
{
src: '/static/mine/like/comment.png',
num: '906478'
},
{
src: '/static/mine/like/like.png',
num: '45655'
},
],
pic: [
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c",
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c",
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c",
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c",
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c",
"https://pic2.zhimg.com/80/v2-
f088bab4e6da49e600ef3ac225e842a5_720w.jpg?source=1940ef5c"
]
},
{
src: 'https://up.enterdesk.com/edpic/2e/78/97
/2e7897af2087369fbbdf5d0337647489.jpg',
name: ' 加藤オズワルト',
grade: '/static/mine/head/grade.png',
tip: ' 加藤オズワルト个性签名...',
mag: '“来自插画师 加藤オズワルド 绘画作品来自插画师 加藤オズワルド
绘画作品来自插画师 加藤オズワルド 绘画作品”',
icon: [{
src: '/static/mine/like/forward.png',
num: '22'
},
{
src: '/static/mine/like/comment.png',
num: '553578'
},
{
src: '/static/mine/like/like.png',
num: '987655'
},
],
pic: [
"https://pic3.zhimg.com/80/v2-
fa4664732e8ec7b3da68bfa414477fa6_720w.jpg?source=1940ef5c",
"https://pic3.zhimg.com/80/v2-
fa4664732e8ec7b3da68bfa414477fa6_720w.jpg?source=1940ef5c",
"https://pic3.zhimg.com/80/v2-
fa4664732e8ec7b3da68bfa414477fa6_720w.jpg?source=1940ef5c"
]
}
]
}
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>
<style scoped lang="scss">
.sticky {
width: 750rpx;
height: 120rpx;
background-color: #2979ff;
color: #fff;
padding: 24rpx;
}
.uer-line {
margin-top: 15rpx;
width: 750rpx;
height: 14rpx;
opacity: 1;
background: #f1f1f1;
}
.like-artive {
display: flex;
width: 700rpx;
height: 80rpx;
margin: 20rpx auto;
.like-meg {
padding-left: 20rpx;
.like-meg-info {
display: flex;
padding-bottom: 15rpx;
.like-meg-title {
font-size: 30rpx;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: bold;
text-align: left;
color: #333333;
}
.like-meg-item {
width: 30rpx;
height: 30rpx;
padding-left: 12rpx;
}
}
.like-meg-tip {
font-size: 20rpx;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #63a4e9;
}
}
.like-botton {
width: 120rpx;
height: 60rpx;
background: #25afa2;
border-radius: 30px;
font-size: 24rpx;
line-height: 60rpx;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
margin-left: auto;
}
}
.like-content {
width: 700rpx;
margin: 25rpx auto 30rpx;
font-size: 28rpx;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #333333;
line-height: 42rpx;
}
.like-photo {
width: 700rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 25rpx auto;
text-decoration: none;
.like-photo-item {
width: 220rpx;
height: 220rpx;
margin-bottom: 20rpx;
image {
width: 220rpx;
height: 220rpx;
}
}
}
.like-data {
display: flex;
/*弹性布局*/
align-items: center;
/*子元素垂直居中*/
justify-content: center;
/*子元素水平居中*/
justify-content: space-around;
/*子元素充满父元素*/
border-top: 1rpx solid #E1E1E1;
.like-data-item {
display: flex;
margin-top: 30rpx;
margin-bottom: 10rpx;
.like-data-icon {
width: 34rpx;
height: 34rpx;
}
.like-data-num {
padding-left: 15rpx;
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #666666;
}
}
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
