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

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

项目截图

uniapp代码

components newsbox newsbox.vue

{{item.title}}{{item.author}}{{item.hits}}浏览浏览时间：{{item.lookTime}}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'}}}}}.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;}}}}

pages index index.vue

国内export default {data() {return {//导航栏索引navIndex:0}},onLoad() {},methods: {//前往新闻详情页goDetail(){uni.navigateTo({url:'/pages/detail/detail'});},//点击导航滑动分类栏clickNav(index){this.navIndex = index;}}}.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;}}}

pages user user.vue

浏览历史export default {data() {return {};},methods:{//前往新闻详情页goDetail(){uni.navigateTo({url:'/pages/detail/detail'});}}}.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;}}}

pages detail detail.vue

新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题新闻的标题编辑：张三2023-01-01 12:00:00新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容声明:本站的内容均采集自腾讯新闻，如有侵权请联系管理员(51389435760qq.com）进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵犯请及时联系管理员，谢谢您的支持。|export default {data() {return {};}}.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;}}

app.vue

export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}/*每个页面公共css */*{padding: 0;margin: 0;box-sizing: border-box;}

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"}]}}

测试

首页

 个人中心

 详情页