新闻系统

一、 创建项目

创建个人中心

page.json 配置 tabar

"tabBar": {"color":"#666","selectedColor": "#31C27C","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "static/images/home.png","selectedIconPath": "static/images/home-h.png"},{"text": "个人","pagePath": "pages/user/user","iconPath": "static/images/user.png","selectedIconPath": "static/images/user-h.png"}]}

从阿里巴巴库中引入矢量图标，放入static 文件夹中

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "青年帮新闻"}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "个人中心","enablePullDownRefresh" : false}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "青年帮新闻","navigationBarBackgroundColor": "#31C27C","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"color":"#666","selectedColor": "#31C27C","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "static/images/home.png","selectedIconPath": "static/images/home-h.png"},{"text": "个人","pagePath": "pages/user/user","iconPath": "static/images/user.png","selectedIconPath": "static/images/user-h.png"}]}
}

整体 page.json如何写。

整体布局

二、 scroll-view 实现横向滚动
代码如下

<template><view class="home"><view class="scrollNav"><!-- 显示滑动左右 用scroll-view --><scroll-view scroll-x="true" class="navscroll"><view class="item">国内</view><view class="item">国内</view><view class="item">国内</view>	<view class="item">国内</view>		<view class="item">国内</view>	<view class="item">国内</view><view class="item">国内</view></scroll-view></view><view class="content"><view class="row">每一行新闻</view></view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style lang="scss" scoped>.navscroll{height: 100rpx;background: #F7F8FA;white-space: nowrap;position: fixed;top:var(--window-top);left:0;z-index: 10;/deep/ ::-webkit-scrollbar {width: 4px !important;height: 1px !important;overflow: auto !important;background: transparent !important;-webkit-appearance: auto !important;display: block;}.item{font-size: 40rpx;display: inline-block;line-height: 100rpx;padding:0 30rpx;color:#333;		&.active{color:#31C27C;}}}.content{padding:30rpx;padding-top:130rpx;	.row{border-bottom:1px dotted #efefef;padding:20rpx 0;}}.nodata{display: flex;justify-content: center;image{width: 360rpx;}}.loading{text-align: center;font-size: 26rpx;color:#888;line-height: 2em;}</style>

三、提取公共组件

创建组件。

<template><view class="newsbox"><view class="pic"><image src="../../static/images/0.jpg"></image></view><view class="text"><view class="title">默认的新闻标题</view><view class="info"><text> 作者名称名称</text><text> 998浏览</text></view></view></view>
</template><script>export default {name:"newsbox",data() {return {};}}
</script><style lang="scss">.newsbox{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: 36rpx;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>

四、个人中心页面部分

因为与首页用公共部分因此，可公用 ，利用父组件给子组件传值使其动态变化因此 改写 子组件newbox
改写如下

<template><view class="newsbox"><view class="pic"><image :src="item.picurl"></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:"newsbox",//字父组件传值 props:{item:{type:Object,default(){return {title:"组件默认标题",author:"张三",hits:668,picurl:"../../static/images/nopic.jpg"}}}}data() {return {};}}
</script><style lang="scss">.newsbox{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: 36rpx;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="user"><view class="top"><image src="../../static/images/history.png" mode=""></image><view class="text">浏览历史</view></view><view class="content"><view class="row" v-for="item in 10"><newsbox></newsbox></view></view></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss">.user{.top{padding:50rpx 0;background: #F8F8F8;color:#666;display: flex;flex-direction: column;justify-content: center;align-items: center;image{width: 150rpx;height: 150rpx;}.text{font-size: 38rpx;		padding-top: 20rpx;}}.content{padding:30rpx;.row{border-bottom:1px dotted #efefef;padding:20rpx 0;}}.nohistory{display: flex;flex-direction: column;justify-content: center;align-items: center;image{width: 450rpx;}.text{font-size: 26rpx;color:#888;}}}</style>