uniapp做一个新闻类的demo演示--青年新闻（前端部分）

这个案例是一个模仿新闻客户端做的，学习中，我把代码提出来，供大家学习参考。

项目截图

uniapp代码

components newsbox newsbox.vue

<template>
	<view class="newsbox">
		<view class="pic">
			<image :src="item.picUrl" mode="aspectFill"></image>
		</view>
		<view class="text">
			<view class="title">
				{{item.title}}
			</view>
			<view class="info" v-if="!item.lookTime">
				<text>{{item.author}}</text>
				<text>{{item.hits}}浏览</text>
			</view>
			<view class="info" v-else>
				<text>浏览时间：{{item.lookTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		name:"newsbox",
		data() {
			return {
				
			};
		},
		props:{
			item:{
				type:Object,
				default(){
					return {
						title:'组件内默认的标题',
						author:'张三',
						hits: 998,
						picUrl:'../../static/logo.png',
						lookTime:'2023-01-01 10:10:20'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newsbox{
		display: flex;
		justify-content: center;
		.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>

pages index index.vue

<template>
	<view class="home">
		<scroll-view scroll-x class="nav-scorll">
			<view 
				class="item" 
				:class="navIndex == index ? 'active': ''" 
				v-for="(item,index) in 10" 
				:key="index" 
				@tap="clickNav(index)">
					国内
				</view>
		</scroll-view>
		
		<view class="content">
			<view class="row" v-for="(item,index) in 10" :key="index">
				<newsbox :item="{title:'标题'}" @tap.native="goDetail"></newsbox>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//导航栏索引
				navIndex:0
			}
		},
		onLoad() {

		},
		methods: {
			//前往新闻详情页
			goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				});
			},
			//点击导航滑动分类栏
			clickNav(index){
				this.navIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		
		.nav-scorll{
			height: 100rpx;
			background-color: #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;
				line-height: 100rpx;
				display: inline-block;
				padding: 0 30rpx;
				color: #333;
				&.active{
					color: #31c27c;
				}
			}
		}
		
		.content{
			margin-top: 100rpx;
			padding: 30rpx;
			
			.row{
				border-bottom: 1px dotted #efefef;
				padding: 20rpx 0;
			}
		}
	}
</style>

pages user user.vue

<template>
	<view class="user">
		<view class="top">
			<icon type="waiting" size="65" class="image"/>
			<text>浏览历史</text>
		</view>
		
		<view class="content">
			<view class="row" v-for="(item,index) in 10" :key="index">
				<newsbox @tap.native="goDetail"></newsbox>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			//前往新闻详情页
			goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.user{
		
		.top{
			padding: 35rpx 0;
			background-color: #f8f8f8;
			color: #666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.image{
				
			}
			
			text{
				font-size: 30rpx;
				padding-top: 20rpx;
			
			}
		}
			
		
		.content{
			padding: 30rpx;
			
			.row{
				border-bottom: 1px dotted #efefef;
				padding: 20rpx 0;
			}
		}
	}
</style>

pages detail detail.vue

<template>
	<view class="detail">
		<view class="title">
			<text :selectable="true" :user-select="true">
				新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题
			</text>
		</view>
		<view class="info">
			<view class="author">
				编辑：张三
			</view>
			<view class="time">
				2023-01-01 12:00:00
			</view>
		</view>
		<view class="content">
			<text :selectable="true" :user-select="true">
				新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容
			</text>
		</view>
		<view class="desc">
			<text :selectable="true" :user-select="true">
				声明:本站的内容均采集自腾讯新闻，如有侵权请联系管理员(51389435760qq.com）进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。
			</text>|
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		padding: 30rpx;
		
		.title{
			font-size: 46rpx;
			color: #333;
		}
		
		.info{
			background-color: #f6f6f6;
			padding: 20rpx;
			font-size: 25rpx;
			color: #666;
			display: flex;
			justify-content: space-between;
			margin: 40rpx 0;
		}
		
		.content{
			
			padding-bottom: 50rpx;
		}
		
		.desc{
			
			background-color: #fef0f0;
			font-size: 24rpx;
			padding: 20rpx;
			color: #f89898;
			line-height: 1.8em;
		}
	}
</style>

app.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}
</style>

pages.json

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

测试

首页

 个人中心

 详情页

以上是前端部分的代码，希望对大家有帮助。