布局中间模块
中间这一块用组件来做 创建一个components目录，用来放组件
然后单击这个目录，新建一个组件blog-item
组件
<template>
<view class="blog">
博客每一条内容
</view>
</template>
<script>
export default {
name:"blog-item",
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>
在首页中，写一个盒子，将组件引进来，并遍历一个变量3次
<!-- 内容部分 -->
<view class="content">
<view class="item" v-for="item in dataList">
<blog-item></blog-item>
</view>
</view>
export default {
data() {
return {
navlist: [{
name: "最新"
}, {
name: "热门"
}],
// 内容部分
dataList:[1,2,3],
// 骨架屏状态
loadingState:false
}
},
组件被引入首页了，并且被遍历了三次，文字内容是写在组件里的
在首页里给内容部分写边距
// 内容部分样式
.content {
.item {
padding:30rpx
}
}
接下来在组件中布局 内容部分分为三块，上面的头像、用户和时间，中间的标题、内容、图片，下面的点赞评论观看人数
子组件基本结构
<template>
<view class="blogitem">
<view class="head"></view>
<view class="body"></view>
<view class="info"></view>
</view>
</template>
<script>
export default {
name:"blog-item",
data() {
return {
};
}
}
</script>
<style lang="scss">
</style>
写一些死数据,因为涉及时间，需要从插件市场安装时间组件uni-dateformat
时间戳这里还能这样写： 原本写出来是这样的：
<uni-dateformat :date="Date.now()" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
按下面这样写出来就是显示七天前
<uni-dateformat :date="Date.now() - 3600000*24*7" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
在组件、扩展组件里找日期格式化，把插件安装好
<template>
<view class="blogitem">
<view class="head">
<view class="userinfo">
<view class="avatar">
<image src="../../static/images/panda.jpg" mode="aspectFill"></image>
</view>
<view class="name">王五</view>
<view class="time">
<uni-dateformat :date="Date.now()" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
</view>
</view>
<view class="more">
<text class="iconfont icon-ellipsis"></text>
</view>
</view>
<view class="body"></view>
<view class="info"></view>
</view>
</template>
加入css样式
<style lang="scss">
.blogitem{
.head{
display:flex;
font-size: 32rpx;
align-items: center;
justify-content: space-between;
.userinfo{
display: flex;
align-items: center;
.avatar{
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border-radius: 50%;
overflow: hidden;
image{
width: 100%;
height: 100%;
display: block;
}
}
.name{
color:#222;
padding-left:10rpx;
}
.time{
color:#888;
font-size: 22rpx;
padding-left:20rpx;
}
}
.more{
padding:5rpx;
.iconfont{
font-size: 50rpx;
color:#888;
}
}
}
.body{
padding:15rpx 0 30rpx;
.title{
font-size: 44rpx;
color:#000;
font-weight: 600;
text-align: justify;
}
.text{
padding-top:10rpx;
padding-bottom:10rpx;
font-size: 30rpx;
text-align: justify;
color:#888;
.t{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.piclist{
display: flex;
padding-top:20rpx;
.pic{
width: 225rpx;
height: 225rpx;
margin-right: 6rpx;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
&:first-child{
border-radius: 20rpx 0 0 20rpx;
}
&:last-child{
border-radius: 0 20rpx 20rpx 0;
}
&.only{
border-radius: 20rpx;
}
}
}
}
.info{
display: flex;
align-items: center;
justify-content:space-around;
font-size: 26rpx;
color:#333;
.box{
display: flex;
align-items: center;
padding:15rpx 0 5rpx;
flex:1;
display: flex;
justify-content: center;
.iconfont{
font-size: 40rpx;
padding-right: 10rpx;
}
}
}
}
</style>
中间部分布局
<!-- 内容部分 -->
<view class="body">
<view class="title">默认标题</view>
<view class="text">
<view class="t">博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要博客摘要</view>
</view>
<!-- 内容部分的缩略图 -->
<view class="piclist">
<!-- 如果只有一张图就给图片上下左右都加圆角 -->
<view class="pic" :class="picArr.length==1 ? 'only':''" v-for="item in picArr" :key="item"></view>
<image src="../../static/images/pic2.jpg" mode="aspectFill"></image>
</view>
</view>
css样式
// 中间内容部分的css样式
.body{
padding:15rpx 0 30rpx;
.title{
font-size: 44rpx;
color:#000;
font-weight: 600;
text-align: justify;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.text{
padding-top:10rpx;
padding-bottom:10rpx;
font-size: 30rpx;
text-align: justify;
color:#888;
.t{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.piclist{
// 使两张图在一行显示
display: flex;
padding-top:20rpx;
.pic{
width: 225rpx;
height: 225rpx;
margin-right: 6rpx;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
// 默认给第一张图片和最后一张加圆角
&:first-child{
border-radius: 20rpx 0 0 20rpx;
}
&:last-child{
border-radius: 0 20rpx 20rpx 0;
}
// 在DOM中用三元表达式判断,如果只有一张图,就上下左右都有圆角
&.only{
border-radius: 20rpx;
}
}
}
}
显示效果有问题，与视频中不一样，视频中是靠左显示两张图，且有圆角
下面的三个按钮部分
<!-- 下方三个按钮 -->
<view class="info">
<view class="box">
<text class="iconfont icon-a-27-liulan">15</text>
</view>
<view class="box">
<text class="iconfont icon-a-5-xinxi">30</text>
</view>
<view class="box">
<text class="iconfont icon-a-106-xihuan">22</text>
</view>
</view>
css样式
.info{
// 下方三个按钮,使用弹性盒模型
display: flex;
align-items: center;
justify-content:space-around;
font-size: 26rpx;
color:#333;
.box{
display: flex;
align-items: center;
padding:15rpx 0 5rpx;
flex:1;
display: flex;
justify-content: center;
.iconfont{
font-size: 40rpx;
padding-right: 10rpx;
}
}
.box.active{
color:#0199FE
}
}
然后在首页中，给中间部分模块的每一部分加间隔
// 内容部分样式
.content {
.item {
padding:30rpx;
border-bottom:#F7F7F7 15rpx solid
}
}
