点击标题、摘要、评论跳转到详情页
如果点了赞，把点赞数+1
详情页有标题，有头像、昵称、发布时间、发布地址 下面富文本框内有正文和图片，在下面还有点赞、点赞人的头像和观看数量 最下面还有评论区
新建详情页
新建detail页面
在子组件blog-item中写点击事件跳转到详情页
<view class="title" @click="goDetail">{{item.title}}</view>
<view class="text" @click="goDetail">
<view class="t">{{item.description}}</view>
</view>
<view class="box" @click="goDetail">
<text class="iconfont icon-a-5-xinxi"></text>
<text>{{item.comment_count ? item.comment_count: "评论"}}</text>
</view>
点击跳转到详情页,要携带被点击的这一条数据的id id是父组件传到子组件的item中的_id
//点击跳转到详情页
goDetail(){
uni.navigateTo({
url:"/pages/detail/detail?id="+this.item._id
})
},
现在点击标题、摘要、评论按钮，都能跳转到详情页了
接下来是detail页面的布局和样式
<template>
<view class="detail">
<!-- 评论区以上的内容部分 container-->
<view class="container">
<!-- 标题部分 -->
<view class="title">这是标题</view>
<!-- 标题下面的用户信息部分 userinfo -->
<view class="userinfo">
<view class="avatar">
<image src="../../static/images/panda.jpg" mode="aspectFill"></image>
</view>
<view class="text">
<view class="name">王五</view>
<view class="small">6天前 - 发布于北京</view>
</view>
</view>
<!-- 内容部分 content -->
<view class="content">
这里是详情页
</view>
<!-- 点赞部分 like -->
<view class="like">
<view class="btn">
<text class="iconfont icon-good-fill"></text>
<text>88</text>
</view>
<view class="users">
<image src="../../static/images/user.jpg" mode="aspectFill"></image>
</view>
<view class="text"><text class="num">998</text>人看过</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.detail{
// 给整个页面加背景色 是灰色
background: #f8f8f8;
// 给detail页面加高度,这是全屏高度
// 后面减去的部分值是标题栏的高度
// h5占了高度,但是微信小程序是不占的,这是为了适配
min-height: calc(100vh - var(--window-top));
.container{
// 内容部分的边距
padding:30rpx;
// 内容部分背景色白色
background: #fff;
.title{
font-size: 46rpx;
color:#333;
line-height: 1.4em;
font-weight: 600;
}
.userinfo{
padding:20rpx 0 50rpx;
display: flex;
align-items: center;
.avatar{
width: 60rpx;
height: 60rpx;
padding-right: 15rpx;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.text{
font-size: 28rpx;
color:#555;
.small{
font-size: 20rpx;
color:#999;
}
}
}
// 富文本区域
.content{
}
// 点赞区域
.like{
display: flex;
flex-direction: column;
align-items: center;
padding:80rpx 50rpx 50rpx;
.btn{
width: 260rpx;
height: 120rpx;
background: #e4e4e4;
border-radius: 100rpx;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 28rpx;
.iconfont{
font-size: 50rpx;
}
// 默认灰色，点赞后背景变成蓝色
&.active{
background: #0199FE;
}
}
.text{
font-size: 26rpx;
color:#666;
.num{
color:#0199FE
}
.spot{
padding:0 10rpx;
}
}
.users{
display: flex;
justify-content: center;
padding:30rpx 0;
image{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
border:3px solid #fff;
margin-left:-20rpx;
}
}
}
}
}
</style>
最终不带评论区的效果如下
