[Day 16] 实作-图片轮播 Carousels

今天来实作首页的活动图片轮播，

先介绍这次会用到 Vuetify 的 Carousels 组件

Carousels组件

v-carousel 属性介绍

他本身有预设一些属性，这边简单介绍几个这次会用到的:

height : number | string

设置组件高度

continuous : bool

确定轮播是否连续

cycle : bool

确定轮播是否应该循环显示图片

interval : number | string

轮播图片的间隔时间，需要cycle属性

delimiter-icon : string

设置轮播分格符的icon

hide-delimiter-background : bool

隐藏底部分格符的背景

show-arrows-on-hover : bool

仅当滑鼠悬浮到轮播上时，才显示切换的箭头

实作

在 Day 14 的时候，

我们把上方的选单完成了，那现在就是要实作各个页面啦

如果还有印象的话，那时候页面header 跟选单我是做在App.vue里

这个目的是为了让user在切换页面时，不需要重新渲染那些部分

而需要渲染的地方，也就是页面切换要变化的部分，可以利用router来更换

检查现在的router

先看一下本来的 index.js，

可以看到本来的路径 "/" 是连结到 HelloWorld这个组件

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
});

也就是说我们目前看到的画面，其实是Helloworld渲染出来的结果

新增页面router

现在我需要一个首页，所以要先连结到一个新的component

在/sre/components 资料夹哩，新增 HomePage.vue

<template>
  <div id="app">
    <h1>HomePage is here!</h1>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
};
</script>

<style scoped>

</style>

记得也要新增一个对应的router，才能路由到对应的component

index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import HomePage from '@/components/HomePage';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/home',
      name: 'home',
      component: HomePage,
    },
  ],
});

查看成果

ok~ 现在点击首页的标签，会渲染到HomePage component了

加上Carousel组件

使用vuetify最赞的地方就是，他有提供很多组件的使用范例，包括了demo、template、script原始码，

例如我这个 Cycle属性的范例，只要点选右上角的 <>，就可以看到他的template跟script

只要环境是原生的 vue + vuetify，就可以完整套用他的范例code

现在先把这个范例code贴到 HomePage.vue

<template>
  <div id="app">
    <h1>HomePage is here!</h1>
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <v-carousel-item
        v-for="(slide, i) in slides"
        :key="i"
      >
        <v-sheet
          :color="colors[i]"
          height="100%"
        >
          <v-row
            class="fill-height"
            align="center"
            justify="center"
          >
            <div class="text-h2">
              {{ slide }} Slide
            </div>
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      colors: [
        'indigo',
        'warning',
        'pink darken-2',
        'red lighten-1',
        'deep-purple accent-4',
      ],
      slides: [
        'First',
        'Second',
        'Third',
        'Fourth',
        'Fifth',
      ],
    };
  },
};
</script>

<style scoped>

</style>

目前画面

把范例完整搬过来了！

接下来就需要根据需求改造一下

他现在是会自动更换底色跟中间的字，而我需要的是图片轮播，然後点图片可以连结到其他页面

更换为图片轮播

这边的连结我是从 open api里面先捞几个来用~

等画面完成後会来串接api，让他可以根据资料自己更新

<template>
  <div id="app">
    <h1>HomePage is here!</h1>
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <v-carousel-item
        v-for="(item,i) in items"  <!-- 回圈取出items里所有资料 -->
        :key="i"
        :src="item.src"   <!-- 取出图片连结 -->
        :href="item.link" <!-- 点击图片後要连结到的网页 -->
        target="_blank"   <!-- 连结会以新分页的方式开启 -->
      ></v-carousel-item>
    </v-carousel>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      items: [
        {
          src: 'https://cloud.culture.tw/e_new_upload/task/97b68b43-4653-4595-b7a0-a816818be7c5/587794988cfb0e6362426451c88d970dcaeab92fbed83de272e1f84b444a4791faa943baf8f2f2132c22901c1fed15e150e81853796917ad0d43678fd0bd4959/75f5e3277ba0206c65cc73cdaaa781922e4c3c5a.jpg',
          link: 'https://www.arte.gov.tw/pro1_exh_now.asp?KeyID\u003d3087',
        },
        {
          src: 'https://cloud.culture.tw/e_new_upload/cms/image/A0/B0/C0/D20/E144/F948/ec4f1767-21a6-45b0-9c65-1f1151f2de53.jpg',
          link: 'https://reurl.cc/dGleMq',
        },
        {
          src: 'https://cloud.culture.tw/e_new_upload/cms/image/A0/B0/C0/D22/E186/F1/3962a866-f005-400f-89e7-05799e95efb4.jpg',
          link: 'http://jam.jutfoundation.org.tw/exhibition/3101',
        },
        {
          src: 'https://cloud.culture.tw/e_new_upload/cms/image/A0/B0/C0/D24/E155/F250/0a005484-53de-4382-958c-e71b79b9cc78.jpg',
          link: 'https://mipaliwlandart.com',
        },
      ],
    };
  },
};
</script>

<style scoped>

</style>