vue2.0 仿手机新闻站(六)详情页制作
手机 制作 新闻 Vue2.0 详情页
2023-09-11 14:15:30 时间
1.结构
2.配置详情页路由
router.config.js
/** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' import Follow from './components/Follow.vue' import Column from './components/Column.vue' import UserInfo from './components/UserInfo.vue' import Article from './components/Article.vue' // 导出路由数组 export default [ { // 首页 path:'/home', component:Home }, { // 关注页 path:'/follow', component:Follow }, { // 栏目页 path:'/column', component:Column }, { // 我的页 path:'/user-info', component:UserInfo }, { // 文章详情页 path:'/article/:id', component:Article }, { // 配置默认路由 path:'/', redirect:'/home' // 路由重定向 }, { path:'*', redirect:'/home' // 路由重定向 } ]
3.通过 router-link路由 跳转详情页
Home.vue
<!-- 首页 --> <template> <div id="home"> <div class="content mt30"> <div class="newsList"> <ul> <li v-for="(item,index) in arrList"> <!-- 通过 router-link路由 跳转详情页 --> <router-link :to="'/article/'+item.id"> <h2>{{index}}.{{item.title}}</h2> <p>{{item.detail}}</p> </router-link> </li> </ul> </div> </div> </div> </template> <script> export default{ data(){ return { arrList:[] } }, mounted(){ // 获取数据 this.fetchData(); }, methods:{ fetchData(){ var _this = this; // this 为 vue的实例 this.$http.get('src/data/index.data').then(function(res){ _this.arrList = res.data; }).catch(function(err){ console.log('Home',err); }); } } } </script> <style scoped> .mt30{ margin-top: 30px; } </style>
4.通过 正则 获取 path 中的 id, 并 通过 id 获取该详情页信息
Article.vue
<!-- 文章详情页 --> <template> <div id="article"> <div class="nav"> <ul> <li class="l-btn" onclick="window.history.go(-1)"></li> </ul> </div> <!-- 内容部分 --> <div class="content"> <div class="header clear"> <h2><img :src="articleData.author_face" alt="" /></h2> <p>百度</p> </div> <div class="cont"> <h3>{{articleData.title}}</h3> <div class="time"> <p>{{articleData.time}}<span><img src="../assets/img/zan.png" alt="" /></span></p> </div> <div class="text-box" v-html="articleData.content"></div> </div> </div> <!-- 底部 --> <div class="foot-btn"> <ul> <li class="say"><a href="javascript:;"> <i></i><span>0</span> </a></li> <li class="zan"><a href="javascript:;"> <i></i><span>0</span> </a></li> <li class="xing"><a href="javascript:;"> <i><img src="../assets/img/xing.png" alt="" /></i> </a></li> <li class="fx"><a href="javascript:;"> <i><img src="../assets/img/fx.png" alt="" /></i> </a></li> </ul> </div> </div> </template> <script> export default{ data(){ return{ // articleData 是个json articleData:{} } }, mounted(){ // console.log(this.$route.path); 例如: /article/1 // 获取 path 中的id var reg = /\/article\/(\d+)/; var id = this.$route.path.match(reg)[1]; console.log(id); this.fetchData(id); }, methods:{ fetchData(id){ var _this = this; this.$http.get('../src/data/article.data').then(function(res){ _this.articleData = res.data[id]; }).catch(function(err) { console.log('文章详情页',err); }) } } } </script> <style scoped> html,body{ overflow-x: hidden; } .nav{width:100%; position:fixed;top:0;left:0; background:#fff; border-bottom:1px solid #e8eaec; z-index:99;} .nav ul{width:6.4rem;height:0.45rem; padding-top:0.15rem; margin:0 auto;} .nav ul li{width:0.29rem;height:0.31rem; background:url(../assets/img/history.png) no-repeat 0 0; background-size:100%; margin:0 0 0 0.38rem;} .content{max-width:6.4rem; margin:0 auto; margin-top:0.6rem; background:#f2f4f5; padding-bottom:0.85rem;} .content .header{ padding:0.39rem 0.28rem 0.15rem 0.28rem; height:auto; background: none} .header h2{ float:left; margin-right:0.18rem;} .header p{ float:left; margin-top:0.18rem; font-size:0.3rem;} .content .cont{ padding:0 0.38rem; color:#494d4d;} .cont h3{ font-size:0.4rem; line-height:0.6rem; padding-bottom:0.25rem; border-bottom:1px solid #494d4d;} .cont .time{height:0.24rem; line-height:0.24rem; margin:0.26rem 0; } .time p{ float:left;position:relative;} .time span{width:0.33rem;height:0.32rem; position:absolute; top:-0.02rem;right:-0.35rem;} .time span img{width:100%;height:100%;} .cont .text-box{ font-size:0.25rem;} .text-box p{ line-height:0.45rem; margin-bottom:0.1rem;} .foot-btn{width:100%;height:0.8rem; background:#fff; border-top:1px solid #e8eaec; position:fixed; left:0;bottom:0;} .foot-btn ul{width:6.4rem; margin:0 auto;height:0.52rem; margin-top:0.16rem;} .foot-btn ul li{ float:left;} .foot-btn ul li a{width:100%;height:100%; display:block;} .foot-btn ul .say{width:2.03rem;height:0.52rem; border-right:1px solid #e8eaec;} .say i{width:0.36rem;height:0.26rem; background:url(../assets/img/say.png) no-repeat 0 0; background-size:100%; float:left; margin-left:0.7rem; margin-top:0.13rem;} .say span{height:0.26rem; float:left; line-height:0.26rem; margin-left:0.16rem; margin-top:0.13rem;} .foot-btn ul .zan{width:1.86rem;height:0.52rem; border-right:1px solid #e8eaec;} .zan i{width:0.36rem;height:0.28rem; background:url(../assets/img/zan1.png) no-repeat 0 0; background-size:100%; float:left; margin-left:0.54rem; margin-top:0.13rem;} .zan span{height:0.26rem; float:left; line-height:0.26rem; margin-left:0.16rem; margin-top:0.13rem;} .foot-btn ul .xing{width:1.2rem;height:0.52rem; border-right:1px solid #e8eaec;} .xing i{width:0.34rem;height:0.24rem; margin:0 auto; display:block; padding-top:0.1rem;} .xing i img{width:100%;} .foot-btn ul .fx{width:1.25rem;height:0.52rem;} .fx i{width:0.33rem;height:0.08rem;display:block; margin:0 auto; padding-top:0.15rem;} .fx i img{width:100%;} </style>
5.效果图
相关文章
- asp.net限时发送手机验证码
- 《惢客创业日记》2018.12.29(周六)取代手机的“量子智能标签”
- Vue.js / Nuxt.js / uni-app - 移动端 H5 网页,在电脑 PC 上打开时居中显示(手机网页在电脑上打开后,简单粗暴防止 “界面样式“ 拉伸变形的解决方案)适用所有web项目
- Uber:用司机手机做数据中心备份
- 数据有重量?存储数据后手机会觉变重吗?
- 华为联运游戏或应用审核驳回:在安装了低于2.5.3版本的华为移动服务手机上调用支付无法拉起升级提示
- 《玩转掌上生活——手机网上生活达人秘笈》一1.1 认识你的设备
- 使用swiper制作手机端轮播图
- 一张图片能导致数百万Android手机被黑?
- 刘国梁和张继科 现身轻奢手机品牌HANMAC新品BON7发布会
- 【Unity3D插件】EasyTouch插件分享《手机摇杆插件》
- 315曝光:公共充电设备可窃取手机照片,还能发信息
- 恶搞之手机垃圾信息发送器 手机短信骚扰器
- 手机电脑密码的制作
- Android个人手机通讯录开发详解
- 手机看:用例图
- 分布式爬虫系统设计、实现与实战:爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储
- MEEM数据线可以在充电时备份手机数据
- 尤金·卡巴斯基:对手机发起攻击的很可能是智能微波炉