个人页面分两部分
上面是一个图标加一个字符串，下面是浏览过的内容，也就是自定义组件的样式
在这里有一个问题，首页的title下面显示灰色字显示的是浏览量，而这个页面显示的是浏览时间
这个问题通过自定义组件的props传值来实现给不同的页面传递不同的值
justify-content属性用于描述弹性盒子容器的对齐方式
align-items居中对齐弹性盒的项<div>元素
<template>
<view class="user">
<view class="top">
<image src="../../static/images/history.png" mode=""></image>
<text>浏览历史</text>
</view>
<view class="content">
<view class="row" v-for="item in listArr">
<newsStyle></newsStyle>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
listArr: 10
};
}
}
</script>
<style lang="scss">
.user{
.top{
padding: 50rpx 0;
background: #f8f8f8;
color: #555;
display: flex;
// 使图标和文字垂直显示
flex-direction: column;
// 下面两句使图标和文字居中显示
justify-content: center;
align-items: center;
image{
width: 150rpx;
height: 150rpx;
}
.text{
font-size: 38rpx;
color: #555;
padding: 20rpx;
}
}
}
</style>
接下来在自定义组件newsStyle.vue中通过props定义组件的初始默认值
<template>
<view class="newsStyle">
<view class="pic">
<!-- mode是图片的显示方法 -->
<image :src="item.picurl" mode="aspectFill"></image>
</view>
<view class="text">
<view class="title">{{item.title}}</view>
<view class="info">
<text>{{item.author}}</text>
<text>{{item.hits}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name:"newsStyle",
props:{
item:{
type:Object,
default(){
return{
title: "组件内默认的标题",
author:"张三",
hits: 668,
picurl: "../../static/images/nopic.jpg"
}
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.newsStyle {
// 使图片和文字在一行显示
display: flex;
.pic {
width: 230rpx;
height: 160rpx;
image {
width: 100%;
height: 100%;
}
}
.text {
// 使文字边框横向占满屏幕
flex: 1;
padding-left: 20rpx;
display: flex;
// 将项目垂直显示
flex-direction: column;
// 使项目上下排列
justify-content: space-between;
.title {
font-size: 38rpx;
color: #333;
// 使文字在两行显示,超出部分显示省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.info {
font-size: 26rpx;
color: #999;
text {
padding-right: 30rpx;
}
}
}
}
</style>
现在首页和个人中心都有默认样式了
根据不同条件渲染不同的值
写两个盒子，类名都是info，然后进行if判断，如果存在looktime这个值就显示浏览时间，否则就显示作者，looktime不是通过接口或取得，接口里没有这个属性，这是在本地自定义的观看时间
自定义组件 newsStyle.vue
<template>
<view class="newsStyle">
<view class="pic">
<!-- mode是图片的显示方法 -->
<image :src="item.picurl" mode="aspectFill"></image>
</view>
<view class="text">
<view class="title">{{item.title}}</view>
<view class="info" v-if="!looktime">
<text>{{item.author}}</text>
<text>{{item.hits}}</text>
</view>
<view class="info" v-else="looktime">
{{item.looktime}}
</view>
</view>
</view>
</template>
<script>
export default {
name:"newsStyle",
props:{
item:{
type:Object,
default(){
return{
title: "组件内默认的标题",
author:"张三",
hits: 668,
picurl: "../../static/images/nopic.jpg"
}
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.newsStyle {
// 使图片和文字在一行显示
display: flex;
.pic {
width: 230rpx;
height: 160rpx;
image {
width: 100%;
height: 100%;
}
}
.text {
// 使文字边框横向占满屏幕
flex: 1;
padding-left: 20rpx;
display: flex;
// 将项目垂直显示
flex-direction: column;
// 使项目上下排列
justify-content: space-between;
.title {
font-size: 38rpx;
color: #333;
// 使文字在两行显示,超出部分显示省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.info {
font-size: 26rpx;
color: #999;
text {
padding-right: 30rpx;
}
}
}
}
</style>
在首页自定义组件标签里写一个对象，覆盖掉原本的默认值
<template>
<view class="home">
<scroll-view scroll-x class="navScroll">
<view class="item" v-for="item in arr">国内</view>
</scroll-view>
<view class="content">
<view class="row" v-for="item in newsList">
<newsStyle :item="{title:'首页标题', author:'李四', hits:'333'}"></newsStyle>
</view>
</view>
</view>
</template>
在个人页面也写一个对象，覆盖原本自定义组件中props传递的默认值
<template>
<view class="user">
<view class="top">
<image src="../../static/images/history.png" mode=""></image>
<text>浏览历史</text>
</view>
<view class="content">
<view class="row" v-for="item in listArr">
<newsStyle :item="{title:'user的标题',looktime:'2022-11-11 10:10:20'}"></newsStyle>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
listArr: 10
};
}
}
</script>
<style lang="scss">
.user{
.top{
padding: 50rpx 0;
background: #f8f8f8;
color: #555;
display: flex;
// 使图标和文字垂直显示
flex-direction: column;
// 下面两句使图标和文字居中显示
justify-content: center;
align-items: center;
image{
width: 150rpx;
height: 150rpx;
}
.text{
font-size: 38rpx;
color: #555;
padding: 20rpx;
}
}
}
</style>
按这样的原理，就能实现传递不同数据了
