【前端】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>