新聞系統

一、 創建項目

創建個人中心

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>