03-vue移动端项目(home首页与他的子页面主页index：嵌套路由，tab选项卡组件做频道区域，vant中的下拉刷新PullRefresh与list上拉加载组件)_home index.vue

首页:

01 - 完成 home 组件

步骤：

• 1.0 在 views 下面创建一个 home文件夹,再在里面建一个index.vue文件
• 2.0 router文件夹中的index.js文件中设置路由

const routes = [
  {
    path: '/useVant',
    component: UseVant
  },
  {
    path: '/',
    component: Login
  },
  {
    path: '/home',
    component: Home,
    children: [
      {
        // path: 'index', // 访问的路径为： /home/index
        path: '/index', // 访问的路径为： /index
        component: Index
      },
      {
        path: '/my',
        component: My
      },
      {
        path: '/question',
        component: Question
      },
      {
        path: '/video',
        component: Video
      }
    ]
  }
]
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

• 3.0 首页views下的home文件夹下的index.vue组件 ,添加 tabBar 完成路由跳转

<template>
  <div>
      <router-view></router-view>
    <van-tabbar route>
      <van-tabbar-item  to="/index"   icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item   to="/question" icon="search">问答</van-tabbar-item>
      <van-tabbar-item    to="/video" icon="friends-o">视频</van-tabbar-item>
      <van-tabbar-item  to='/my'  icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

02 - 完成主页&我的路由的切换

步骤：

• 1.0 在 views 下面创建 index & my
• 2.0 设置路由：
  • 将 index & my 设置为 home 的子路由
• 3.0 在 home 中添加 router-view

主页:

01 - 完成组件布局

布局情况：

• 头部标题
• 频道区域
• 频道下文章区域

02 - 头部标题结构

使用vant中的 van-nav-bar

03 - 频道区域结构

使用 vant 中的 tab 组件

04 - 文章区域结构

说明如果要文章区域可以上拉加载更多，需要使用到 vant 中的一个组件：list 组件

属性：

v-model：是否处于正在上拉加载更多的操作

finished：list 数据源中的数据是否完全加载完成

事件：

load：当 List 组件在上拉加载更多时，会执行的事件

步骤：

• 1.0 使用 list 组件将文章内容包裹起来

05 - 固定头部&频道区域

步骤：

• 1.0 将头部导航固定起来
• 2.0 将频道区域固定起来

07 - 频道操作按钮布局

在频道区域的右侧添加一个按钮

步骤：

• 1.0 在页面上添加一个容器：设置按钮
• 2.0 给容器设置固定定位：定到屏幕的右上角
• 3.0 设置宽度为 10%
• 4.0 修改频道结构的宽度为 90%

08 - 上拉加载更多

问题：由于黑马头条是一个新闻类的网站，需要向上滑动时加载更多的信息，需要完成上拉加载更多

方案：可以使用 vant 中的组件来完成： list

案例：

• 1.0 默认情况下 list 组件中会显示 0 条数据
• 2.0 在 List 组件中 会先加载 20 条数据
• 3.0 当上拉触底时，再加载 20 条数据
• 4.0 当数据源的总条数据达到 100 条时，停止加载数据

注意点：

执行时机：
1.0 当 list 组件被加载时会执行一次
2.0 当页面的滚动条触底时会再次执行 onload

• 注意点
  • 1.0 onload 如果要执行必须保证 list 组件的 v-model 对应的值的为 false
  • 2.0 每次 onload 执行之后会自动将 v-model 对应的值设置为 true，
    所在每次 onload 执行完成之后需要手动将 v-model 对应的值改为 false
  • 3.0 如果 list 的 finished 属性为 true, 那么 onload 事件不会再执行

3.0 要进行内容拼接时，不用 push ，用[...this.list, ...arr]

09- 下拉刷新结构

要实现下拉刷新，需要单独添加一个组件：PullRefresh

PullRefresh

• 属性：

  • v-model：isloading
    • 作用：用来表示下拉刷新的状态
    • true：处于下拉刷新中，无法再次执行 refresh 事件
    • false：下拉刷新完成

• 事件：

  • refresh ：
    • 作用：下拉刷新时触发
    • 触发之后会将 v-model 对应的值改为 true，需要手动将这个值修改回 false

• 当下拉之后：

  • 1.0 将 list 组件中渲染的数据的长度重置为 0
  • 2.0 将 list 组件可以继续上拉加载更多

主页views下的index文件夹下的index.vue组件代码:

<template>
 <div class="index">
     <!-- 头部标题-->
   <van-nav-bar title="主页" fixed />
   <!-- 频道区域 -->
   <van-tabs>
     <van-tab v-for="index in 8" :title="'标签 ' + index" :key="index">
       <!-- 下拉刷新 -->
       <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <!-- 上拉显示下面数据 -->
       <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
         <van-cell v-for="item in list" :key="item" :title="item" />
       </van-list>
       </van-pull-refresh>
     </van-tab>
   </van-tabs>
   <!-- 操作按钮 -->
   <div class="process">
     <van-icon name="bars" />
   </div>
 </div>
</template>

<script>
export default {
 data () {
   return {
     // list组件的 加载状态
     loading: false,
     // 判断list组件中的数据是否全部加载完毕
     finished: false,
     // ceil的数据源
     list: [],
     // 下拉刷新组件的刷新状态
     isLoading: false
   }
 },
 methods: {
   // 当list组件滚动到底部是会触发这个事件
   onLoad () {
     console.log('到底')
     // 会在list触底时加载:添加15条数据
     var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
     // 将这20条数据加载到list中
     this.list = [...this.list, ...arr]
     // 还有数据 不用加载
     this.loading = false
     // 判断长度,如果达到100就停止显示没有数据
     if (this.list.length >= 100) {
       this.finished = true // 停止加载
     }
   },
   // 下拉刷新触发的方法
   onRefresh () {
     setTimeout(() => {
       // 刷新完之后不用加载就将v-model设置为false
       this.isLoading = false
       // 把list清空
       this.list = []
       this.finished = false // 继续加载
       this.onLoad()
     }, 2000)
   }
 }
}
</script>
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
59
60
61
62
63
64
65
66