转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_4.html

项目github地址:https://github.com/shamoyuu/vue-vux-iconan

上一章我们引入了vuex,这一章我们就来用一下。

我们底部的导航在进入漫画页的时候会隐藏,退出来之后会重新显示,所以我们给它加一个参数来控制。

首先在store.js文件里加一个变量ifShowNavBar: true,然后在App.vue里引入,并给app-footer添加v-show="ifShowNavBar"。

这样以后我们在其他页面控制vuex的ifShowNavBar变量的时候,就会自动处理UI了。

然后我们新建一个组件,只用来控制这个变量,在组件初始化之前设置为false,在组件销毁后设置为true,这样以后不想展示底部导航条的页面引入这个组件就好了。

新建一个文件components/common/HideNavBar.vue

<template>
<div></div>
</template> <script>
export default {
name: "HideNavBar",
beforeMount() {
//创建之前
this.$store.commit("hideNavBar");
},
destroyed() {
//销毁完成
this.$store.commit("showNavBar");
}
};
</script> <style scoped>
div {
display: none;
}
</style>

有些人习惯把这样的功能做成指令,但是vuex只推荐在组件中调用,所以。

然后我们开始开发漫画页吧,新建components/Opus.vue文件

<template>
<div class="opus-view">
<hide-nav-bar></hide-nav-bar>
<header-bar></header-bar>
<div class="opus-body">
<img :src="opus.cover" class="opus-body-content-bcg-img">
<div class="opus-body-content">
<img :src="opus.cover" class="opus-body-content-img">
<div class="opus-body-content-txt">
<h1 class="opus-name">{{opus.name}}</h1>
<div class="opus-author">作者:{{opus.author}}</div>
<div>
<rater v-model="opus.score" star="♡" active-color="#fb7279" :font-size="15" :margin="0" disabled></rater>
<span class="opus-popularity">{{opus.popularity}}人已阅</span>
</div>
</div>
</div>
<div class="opus-body-jaw">
<button @click="read" class="read-btn" type="button">开始阅读</button>
</div>
</div>
<div class="button-tab-area">
<tab custom-bar-width="20px">
<tab-item selected @on-item-click="onItemClick">目录</tab-item>
<tab-item @on-item-click="onItemClick">详情</tab-item>
</tab>
</div>
<div class="chapter-area" v-show="tabIndex == 0">
<div class="chapter" v-for="item in chapters" :key="item.id">{{item.name}}</div>
</div>
<div class="summary-area" v-show="tabIndex == 1">
{{opus.summary}}
</div>
</div>
</template> <script>
import { Tab, TabItem, Flexbox, FlexboxItem, Rater } from "vux";
import HideNavBar from "@/components/common/HideNavBar";
import HeaderBar from "@/components/common/HeaderBar";
console.info(this.$score);
export default {
data() {
return {
opus: {
name: "名侦探柯南",
summary:
"高中生侦探工藤新一,被称为“日本警察的救世主”、“平成年代的福尔摩斯”。一次在与青梅竹马的女友毛利兰...",
author: "青山刚昌",
type: 0,
cover: "http://iconan.bj.bcebos.com/1%2Fcover.jpg",
popularity: "100万+",
score: 4.5
},
chapters: [
{
id: 1,
name: "第一卷"
},
{
id: 2,
name: "第二卷"
},
{
id: 3,
name: "第三卷"
},
{
id: 4,
name: "第四卷"
},
{
id: 5,
name: "第五卷"
}
],
tabIndex: 0
};
},
methods: {
read: function() {
console.info("开始阅读");
},
onItemClick: function(index) {
this.tabIndex = index;
}
},
mounted: function() {},
components: {
Tab,
TabItem,
HideNavBar,
HeaderBar,
Flexbox,
FlexboxItem,
Rater
}
};
</script> <style scoped lang="less">
.opus-view {
position: relative;
}
.opus-body {
position: relative;
width: 100%;
height: 107.6vw;
background: #717171;
}
.opus-body-content {
position: relative;
padding-top: 14.7vw;
text-align: center;
}
.opus-body-content-bcg-img {
position: absolute;
width: 100%;
vertical-align: middle;
filter: blur(50px);
}
.opus-body-content-img {
width: 34vw;
} .opus-name {
font-size: 8.53vw;
color: #fff;
-webkit-text-stroke: 2px #333;
}
.opus-author {
font-size: 3.73vw;
color: #ccc;
text-shadow: 0px 0px 3px #333;
}
.opus-body-jaw {
position: absolute;
bottom: 0;
width: 100%;
height: 16vw;
background: url("../assets/images/opus-main-top.png") 0 0 no-repeat;
background-size: 100%;
text-align: center;
}
.read-btn {
padding: 2.8vw 9vw;
margin-top: 10px;
border-radius: 100px;
background: #fb7279;
font-size: 4.27vw;
color: #fff;
} .button-tab-area {
position: relative;
padding: 0 10vw;
background: #fff;
} .chapter-area {
position: relative;
justify-content: space-between;
flex-flow: row wrap;
background: #fff;
} .chapter {
display: inline-block;
width: 27vw;
padding: 2vw 1.5vw;
margin: 2vw 0 0 2vw;
border: 1px solid #e5e5e5;
border-radius: 3px;
text-align: center;
color: #fb7279;
} .summary-area {
position: relative;
padding: 4vw;
background: #fff;
}
.opus-popularity {
font-size: 15px;
color: #fb7279;
}
</style>

这里面还引入了一个公共的头部,用来返回的,新建components/common/HeaderBar.vue文件

<template>
<div class="header">
<button type="button" class="back-btn" @click="back"></button>
</div>
</template> <script>
export default {
name: "HeaderBar",
data() {
return {};
},
methods: {
back() {
this.$router.back();
}
}
};
</script> <style scoped>
.header {
position: absolute;
top: 0;
left: 0;
padding: 12px;
width: 100%;
z-index: 1;
}
.back-btn {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
background: url("../../assets/images/return.png") 0 0 no-repeat;
background-size: 30px;
}
</style>

【前端】Vue2全家桶案例《看漫画》之四、漫画页的更多相关文章

  1. 【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html 项目github地址:https://github.com/shamoyuu/ ...

  2. 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...

  3. 【前端】Vue2全家桶案例《看漫画》之六、图片阅读页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_6.html 项目github地址:https://github.com/shamoyuu/ ...

  4. 【前端】Vue2全家桶案例《看漫画》之二、完成首页基本样式

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_2.html 项目github地址:https://github.com/shamoyuu/ ...

  5. 【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_7.html 项目github地址:https://github.com/shamoyuu/ ...

  6. 【前端】Vue2全家桶案例《看漫画》之五、引入axios

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...

  7. 【前端】Vue2全家桶案例《看漫画》之三、引入vuex

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_3.html 项目github地址:https://github.com/shamoyuu/ ...

  8. Vue2全家桶+Element搭建的PC端在线音乐网站

    目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 登录页 首页 排行榜 歌单列表 歌单详情 歌手列表 歌手详情 MV列表 MV详情 搜索页 播放器 1,前言 项目基于Vue2全家桶及 ...

  9. Vue2全家桶之一:vue-cli(vue脚手架)超详细教程

    本文转载于:https://www.jianshu.com/p/32beaca25c0d   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...

随机推荐

  1. IE各个版本的差异性

    1.IE6a.不支持png半透明图片,只能用filter实现b.不支持css的max-width.max-height.min-width.min-height其他不用说,一团糟,不过项目中还是得去兼 ...

  2. CURL post/get提交

    public function curlss($url){ $curl = curl_init(); // 设置你需要抓取的URL curl_setopt($curl, CURLOPT_URL, $u ...

  3. 网卡bond技术

    概览: 目前网卡绑定mode共有七种(0~6)bond0.bond1.bond2.bond3.bond4.bond5.bond6 常用的有三种: mode=0:平衡负载模式,有自动备援,但需要&quo ...

  4. 【socket编程】select manual page翻译

    原文: select manual page 依赖的头文件 /* According to POSIX.1-2001, POSIX.1-2008 */ #include <sys/select. ...

  5. Keepalived+LVS 实现高负载均衡Web集群

    一.原理及简介: 1.1 Keepalived简介      Keepalived是Linux下一个轻量级别的高可用解决方案.Keepalived起初是为LVS设计的,专门用来监控集群系统中各个服务节 ...

  6. linux shell 中的 2>&1 用法说明

    linux中有三种标准输入输出,分别是 STDIN,STDOUT,STDERR,对应的数字是 0,1,2. STDIN 是标准输入,默认从键盘读取信息: STDOUT 是标准输出,默认将输出结果输出至 ...

  7. 新人如何运行Faster RCNN的tensorflow代码

    0.目的 刚刚学习faster rcnn目标检测算法,在尝试跑通github上面Xinlei Chen的tensorflow版本的faster rcnn代码时候遇到很多问题(我真是太菜),代码地址如下 ...

  8. Django(三) ORM操作

    一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 ORM:关系对象映射.定义一个类自动生成数据库的表结构. 数据库常用的数据类型 : 数字 字符串 时间 ORM分为两种类型: 主流都是 ...

  9. 将常用的Android adb shell 命令行封装为C#静态函数

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:adb命令是常用的Android命令行,自动化.代码调试.手工排查问题都会用的到,这里将常用的一些命令行封装 ...

  10. 使用xUnit为.net core程序进行单元测试(3)

    第1部分: http://www.cnblogs.com/cgzl/p/8283610.html 第2部分: http://www.cnblogs.com/cgzl/p/8287588.html 请使 ...