小QA学习前端系列之vue实战2

发表于

继续了解 list view

接上一节代码
我们首先去看看nvhead component
import nvHead from ‘../components/header.vue’;
其实就是 header.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
    <div>
        <div class="page-cover" v-if="show&&fixHead" @click="showMenus">
        </div>
        <header :class="{'show':show&&fixHead,'fix-header':fixHead,'no-fix':!fixHead}" id="hd">
            <div class="nv-toolbar">
                <div class="toolbar-nav" @click="openMenu" v-if="fixHead">
                </div>
                <span v-text="pageType"></span>
                <i class="num" v-if="messageCount > 0"> {{messageCount}}</i>
                <router-link to="/add">
                    <i v-if="needAdd" v-show="!messageCount || messageCount <= 0" class="iconfont add-icon">&#xe60f;</i>
                </router-link>
            </div>
        </header>
        <nv-menu :show-menu="show" :page-type="pageType" :nick-name="nickname" :profile-url="profileimgurl" v-if="fixHead"></nv-menu>
    </div>
</template>
<script>
import $ from 'webpack-zepto';
export default {
    replace: true,
    props: {
        pageType: String,
        fixHead: Boolean,
        messageCount: Number,
        scrollTop: 0,
        needAdd: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            nickname: '',
            profileimgurl: '',
            show: false
        };
    },
    methods: {
        openMenu() {
            // $('html, body, #page').addClass('scroll-hide');
            $('body').css('overflow', 'hidden');
            this.show = !this.show;
        },
        showMenus() {
            this.show = !this.show;
            $('body').css('overflow', 'auto');
            // $('html, body, #page').removeClass('scroll-hide');
        }
    },
    components: {
        'nvMenu': require('./menu.vue')
    }
};
</script>

ok我们一行一行代码过

1
<div class="page-cover" v-if="show&&fixHead" @click="showMenus">

fixHead来自于list.vue中传递过来的参数

1
2
3
4
5
<nv-head :page-type="getTitleStr(searchKey.tab)"
             ref="head"
             :fix-head="true"
             :need-add="true">
     </nv-head>

show来自于 data()
click 调用showMenus()

1
2
3
4
5
showMenus() {
           this.show = !this.show;
           $('body').css('overflow', 'auto');
           // $('html, body, #page').removeClass('scroll-hide');
       }

1
<header :class="{'show':show&&fixHead,'fix-header':fixHead,'no-fix':!fixHead}" id="hd">

通过一些参数来定制header的样式

1
<div class="toolbar-nav" @click="openMenu" v-if="fixHead">

click方法调用 openmenu

1
2
3
4
5
openMenu() {
           // $('html, body, #page').addClass('scroll-hide');
           $('body').css('overflow', 'hidden');
           this.show = !this.show;
       }

1
<i class="num" v-if="messageCount > 0"> {{messageCount}}</i>

messageCount 来自于messagfe.vue

1
2
3
4
5
<nv-head page-type="消息"
               :fix-head="true"
               :show-menu="showMenu"
               :message-count="no_read_len"
               :need-add="true" ></nv-head>
1
2
3
<router-link to="/add">
                    <i v-if="needAdd" v-show="!messageCount || messageCount <= 0" class="iconfont add-icon">&#xe60f;</i>
                </router-link>

router-link 指向 add 路由

1
<nv-menu :show-menu="show" :page-type="pageType" :nick-name="nickname" :profile-url="profileimgurl" v-if="fixHead"></nv-menu>

:show-menu=”show” :page-type=”pageType” :nick-name=”nickname” :profile-url=”profileimgurl”
调用方法 传参数 返回其值
上面基本的header 组件已经详尽介绍
下来让我回到list中继续
list 中 第二部分由一个html5 section标签构成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<section id="page">
            <!-- 首页列表 -->
            <ul class="posts-list">
                <li v-for="item in topics" :key="item.id">
                    <router-link :to="{name:'topic',params:{id:item.id}}">
                    <h3 v-text="item.title"
                            :class="getTabInfo(item.tab, item.good, item.top, true)"
                            :title="getTabInfo(item.tab, item.good, item.top, false)">
                    </h3>
                    <div class="content">
                        <img class="avatar" :src="item.author.avatar_url" />
                        <div class="info">
                            <p>
                                <span class="name">
                                    {{item.author.loginname}}
                                </span>
                                <span class="status" v-if="item.reply_count > 0">
                                    <b>{{item.reply_count}}</b>
                                    /{{item.visit_count}}
                                </span>
                            </p>
                            <p>
                                <time>{{item.create_at | getLastTimeStr(true)}}</time>
                                <time>{{item.last_reply_at | getLastTimeStr(true)}}</time>
                            </p>
                        </div>
                    </div>
                    </router-link>
                </li>
            </ul>
        </section>

由一个无序例表组成


  • 循环输出topics 对象 key 是item.id
    topic则来自于 data（）返回 由mounted（）方法计算后得出
    具体流程mounted 调用 sessionstorage或者 调用getTopics ，getTopics又去调用mergeTopics 之后将 topic返回

    跳转到参数为item.id topic页面

    • <h3 v-text="item.title"
                           :class="getTabInfo(item.tab, item.good, item.top, true)"
                           :title="getTabInfo(item.tab, item.good, item.top, false)">
                   </h3>

    设置样式

    其他也没什么了 都去 item对象中取值