uniapp小视频项目：消息列表开发

本文主要是介绍uniapp小视频项目：消息列表开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 1、创建消息页面
- 2、完善消息页面

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>