正文
【前端】Vue2全家桶案例《看漫画》之四、漫画页
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
转载请注明出处：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>
