新闻系统
一、 创建项目
创建个人中心
page.json 配置 tabar
js
"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 文件夹中
javascript
{
"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 实现横向滚动
代码如下
js
<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>
三、提取公共组件
创建组件。
js
<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
改写如下
js
<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>个人组件代码
js
<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>