1、创建消息页面
首先创建 news 页面，然后在 pages.json 中设置为 tabbar 页面，然后给 tab 页面中增加跳转
pages.json
{
......
"tabBar": {
"list": [......
{
"pagePath": "pages/news/news",
"text": "消息"
}
]
}
}
修改 tab.vue
<navigator open-type="switchTab" url="/pages/news/news" class="tab-box">
消息
</navigator>
新建消息头部页面 news-nav.vue，并引入 news 页面
<template>
<view class="newsNav">
<view class="title">消息</view>
</view>
</template>
<script>
export default {
name:"newsNav",
data() {
return {
};
}
}
</script>
<style>
.newsNav{
width: 100%;
height: 80px;
}
.title{
width: 100%;
text-align: center;
height: 80px;
line-height: 80px;
font-size: 20px;
color: #ffffff;
}
</style>
同时把 tab 引入页面
<template>
<view class="news">
<news-nav></news-nav>
<tab></tab>
</view>
</template>
<script>
import newsNav from '../../components/newsNav.vue'
import tab from '../../components/tab'
export default {
components:{
newsNav,
tab
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.news{
width: 100%;
height: 100%;
background: #000000;
}
</style>
暂时的效果：
2、完善消息页面
修改 news.vue，引入新建组件 news-content
<template>
<view class="news">
<news-nav></news-nav>
<news-content></news-content>
<tab></tab>
</view>
</template>
<script>
import newsNav from '../../components/newsNav.vue'
import tab from '../../components/tab'
import newsContent from '../../components/newsContent.vue'
export default {
components:{
newsNav,
tab,
newsContent
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.news{
width: 100%;
height: 100%;
background: #000000;
}
</style>
新建 newsContent.vue 组件
<template>
<view class="newsContent">
<view class="box">
<view class="icon" v-for="item in iconList" :key="item.id">
<view class="img-box">
<image class="img" :src="item.id"></image>
</view>
<view class="icon-text">
{{item.text}}
</view>
</view>
</view>
<view class="newsList">
<view class="item" v-for="item in newsList" :key="item.id">
<view class="author-img-box">
<image class="author-img" src="../static/profile.webp"></image>
</view>
<view class="text">
<view class="top">
<view class="name">
{{item.name}}
</view>
<view class="time">
{{item.time}}
</view>
</view>
<view class="content">
{{item.content}}
</view>
</view>
</view>
<view class="more">
没有更多消息
</view>
</view>
</view>
</template>
<script>
export default {
name: "newsContent",
data() {
return {
newsList:[
{
'id':1,
'name':'张三',
'time':'周三',
'content':'很高兴和大家认识'
},
{
'id':2,
'name':'李四',
'time':'周四',
'content':'Nice 2 meet u'
},
{
'id':3,
'name':'王五',
'time':'周五',
'content':'戴好口罩，居家工作ing'
},
],
iconList:[
{
'id':1,
'src':'../static/fensi.png',
'text':'粉丝'
},
{
'id':2,
'src':'../static/dianzan.png',
'text':'点赞'
},
{
'id':3,
'src':'../static/pinglun.png',
'text':'评论'
},
{
'id':4,
'src':'../static/hudong.png',
'text':'随拍互动'
}
]
};
}
}
</script>
<style>
.newsContent {
width: 100%;
background: #000000;
}
.box {
width: 100%;
height: 120px;
}
.icon {
width: 25%;
height: 100px;
float: left;
margin: 0 auto;
}
.img-box {
text-align: center;
}
.img {
width: 40px;
height: 40px;
border-radius: 5px;
margin-top: 20px;
}
.icon-text {
font-size: 13px;
text-align: center;
color: #eeeeee;
margin-top: 5px;
}
.newsList{
background:#000000;
}
.item{
height: 60px;
padding: 15px 10px;
}
.author-img-box{
float: left;
margin-left: 10px;
}
.author-img{
width: 45px;
height: 45px;
border-radius: 50%;
}
.text{
float: left;
margin-left: 10px;
height: 50px;
width: 75%;
color: #ffffff;
}
.top{
height: 25px;
line-height: 25px;
}
.name{
float: left;
font-size: 18px;
}
.time{
float: right;
font-size: 11px;
color: #aaaaaa;
}
.content{
height: 25px;
line-height: 25px;
font-size: 13px;
color: #aaaaaa;
}
.more{
width: 100%;
height: 50px;
line-height: 50px;
color: #aaaaaa;
text-align: center;
font-size: 12px;
}
</style>
查看效果
