[Day 17] 实作-热门活动排行 List

嗨！昨天做好首页的图片轮播了

可能大家会疑惑

什麽时候才会串接api？

其实我个人习惯是把前端页面都做好後，再一次处理资料串接的部分，

每个工程师会有自己的开发习惯~

那目前纯画面我都会先塞假资料，到时候再一并处理

之後会有一篇专门写串接api的文，想要同时做画面+串api的人，可以参考那篇

本日目标：制作热门活动排行榜

这次要用 List组件来完成

https://ithelp.ithome.com.tw/upload/images/20211002/201407453YO0UhGqdR.png

一样挑一个范例来改

下图这个就蛮适合的，我需要的条件如下：

  1. 前面的icon改成排行名次
  2. 移除後面的头像
  3. 点击後要连到对应的活动页面

https://ithelp.ithome.com.tw/upload/images/20211002/2014074518ed7ZdFKH.png

ok~ 那一样先把范例程序码塞进去看看

加入范例code

因为预设的data参数都用 item 命名，所以这边改一下

把本来 carousel组件 的 item 改名成 carouselItems，

新加的 list 改成，我要做付费活动排行，所以改成 payEventItems

HomePage.vue

<template>
  <div id="app">
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <v-carousel-item
        v-for="(item,i) in carouselItems"
        :key="i"
        :src="item.src"
        :href="item.link"
        target="_blank"
      ></v-carousel-item>
    </v-carousel>
    <v-card   <!-- 用一个card包起来 -->
      max-width="500"
      class="mx-auto"
    >
      <v-list>
        <v-list-item
          v-for="item in payEventItems" <!-- 这边的变数改成下方设定的新名字 -->
          :key="item.title"
        >
          <v-list-item-icon>
            <v-icon
              v-if="item.icon"
              color="pink"
            >
              star <!-- 因为我是用material icons，所以改一下icon的用法 -->
            </v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>

          <v-list-item-avatar>
            <v-img :src="item.avatar"></v-img>
          </v-list-item-avatar>
        </v-list-item>
      </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      carouselItems: [
        {
          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',
        },
      ],

//带入资料参数 (後面会再更改)
      payEventItems: [
        { icon: true, title: 'Jason Oner', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' },
        { title: 'Travis Howard', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' },
        { title: 'Ali Connors', avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' },
        { title: 'Cindy Baker', avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' },
      ],
    };
  },
};
</script>

<style scoped>

</style>

目前成果

可以看到轮播图片的下方多了一个清单，除了上方的toolbar，其他都跟范例差不多

https://ithelp.ithome.com.tw/upload/images/20211002/20140745piCSyIhC8v.png

依照需求修改

那现在就要把范例改成我想要的样子，我们一步一步来！

调整template

  1. 点击後要连到对应的活动页面
  2. 前面的icon改成排行名次
  3. 要显示活动的类别跟标题
  4. 移除後面的头像
<v-card
  max-width="500"
  class="mx-auto"
>
  <v-list>
    <v-list-item
    v-for="item in payEventItems"
    :key="item.title"
    :href="item.link" <!--1. 点击後要连到对应的活动页面 -->
		target="_blank"
  >

		<!--2. 前面的icon改成显示排行名次-->
      <v-list-item-icon>
        <v-avatar color="orange" rounded size="36">
          <span class="white--text text">{{item.rank}}</span>
        </v-avatar>
      </v-list-item-icon>
		<!-- --- -->

      <v-list-item-content>
				<!--3. 要显示活动的类别跟标题 -->
	      <v-list-item-title>{{ item.type }} - {{ item.title }}</v-list-item-title>
	    </v-list-item-content>

      <!--4. 移除後面的头像-->

      <v-list-item-avatar>
        <v-img :src="item.avatar"></v-img>
      </v-list-item-avatar>

      <!--以上移除-->

    </v-list-item>
  </v-list>
</v-card>

更改data

把payEventItems改成活动网址

参数说明:

rank : 排行的名次

type : 活动类别

title : 活动名称

link : 活动网址

payEventItems: [
        {
          rank: 1,
          type: '展览',
          title: '再见捌捌陆Zone—台湾眷村文化园区常设展',
          link: 'http://event.moc.gov.tw/sp.asp?xdurl=ccEvent2016/ccEvent_cp.asp&cuItem=2489717&ctNode=676&mp=1',
        },
        {
          rank: 2,
          type: '展览',
          title: '从那日出之地-兰屿大船拜访号-Si Mangavang展',
          link: 'https://www.tacp.gov.tw/News/ExhibitionInfo?ID=abd05926-b37c-48ed-a966-4bfa49d1b648',
        },
        { rank: 3, type: '展览', title: '寺庙神像常设展（二馆二楼）', link: 'http://wood.mlc.gov.tw/' },
        {
          rank: 4,
          type: '亲子',
          title: '2021宜兰绮丽观光园区 ~绮丽好好玩！',
          link: 'https://ticket.com.tw/Application/UTK02/UTK0201_.aspx?PRODUCT_ID=N0NLFCFS',
        },
        { rank: 5, type: '研习课程', title: '魔幻珐琅/七宝烧体验课程', link: 'https://www.facebook.com/pg/juhauwanyi/events/' },
      ],
    };

目前成果

看起来好像符合我的需求了喔！

https://ithelp.ithome.com.tw/upload/images/20211002/201407459Yz2C2k7Jj.png

现在帮他加上card-title，然後再做一个免费排行吧

加上Card-title

Card其实是非常常用的组件之一，这边就不多描述，详细用法请参考 Card 组件

在v-card里，加上v-card-title，他就会自动判别这个是card的标题

<v-card>
	<v-card-title>
	    热门活动排行-付费
	</v-card-title>
	...
</v-card>

https://ithelp.ithome.com.tw/upload/images/20211002/20140745S3H0yXqlrp.png

制作一个活动排行-免费

因为除了资料跟标题以外，其他格式、排版都是一样的

这种重复性的程序，就可以用 v-for 的方式让他自动渲染

为了让2个排行榜可以水平呈现，这边加上了Grid组件 v-container、v-row、v-col

这一样是非常常用到的组件，在不同的装置可以呈现适当的画面，文档可参考这边

<template>
  <div id="app">
    <v-container>
      <v-row>
        <v-col sm="12"> <!--把照片轮播设为最大宽度-->
          <v-carousel
            cycle
            height="400"
            hide-delimiter-background
            show-arrows-on-hover
          >
            <v-carousel-item
              v-for="(item,i) in carouselItems"
              :key="i"
              :src="item.src"
              :href="item.link"
              target="_blank"
            ></v-carousel-item>
          </v-carousel>
        </v-col>
        <v-col
          sm="6"
          v-for="typeItems in eventItems" <!--回圈渲染 eventItems-->
          :key="typeItems.type">
          <v-card
            max-width="500"
            class="mx-auto"
            flat
            outlined
          >
            <v-card-title>
              热门活动排行-{{ typeItems.title }} <!--标题自动带入 付费 or 免费-->
            </v-card-title>
            <v-list>
              <v-list-item
                v-for="item in typeItems.eventList" <!--把渲染对象改成父层物件的 eventList-->
                :key="item.title"
                :href="item.link"
                target="_blank"
              >
                <v-list-item-icon>
                  <v-avatar color="orange" rounded size="36">
                    <span class="white--text text">{{ item.rank }}</span>
                  </v-avatar>
                </v-list-item-icon>

                <v-list-item-content>
                  <v-list-item-title>{{ item.type }} - {{ item.title }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

为了配合 v-for ，资料格式也需要调整一下

这边建了一个新的 eventItems，他是一个 List [ Dict ] 的格式

eventItems 参数介绍 :

type : key

title : 用来当作card-title的变动值

eventList : 里面就是本来的 payEventItems格式

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      carouselItems: [
        ...
      ],
      eventItems: [{
        type: 'pay',
        title: '付费',
        eventList: [
          {
            rank: 1,
            type: '展览',
            title: '再见捌捌陆Zone—台湾眷村文化园区常设展',
            link: 'http://event.moc.gov.tw/sp.asp?xdurl=ccEvent2016/ccEvent_cp.asp&cuItem=2489717&ctNode=676&mp=1',
          },
          {
            rank: 2,
            type: '展览',
            title: '从那日出之地-兰屿大船拜访号-Si Mangavang展',
            link: 'https://www.tacp.gov.tw/News/ExhibitionInfo?ID=abd05926-b37c-48ed-a966-4bfa49d1b648',
          },
          { rank: 3, type: '展览', title: '寺庙神像常设展（二馆二楼）', link: 'http://wood.mlc.gov.tw/' },
          {
            rank: 4,
            type: '亲子',
            title: '2021宜兰绮丽观光园区 ~绮丽好好玩！',
            link: 'https://ticket.com.tw/Application/UTK02/UTK0201_.aspx?PRODUCT_ID=N0NLFCFS',
          },
          { rank: 5, type: '研习课程', title: '魔幻珐琅/七宝烧体验课程', link: 'https://www.facebook.com/pg/juhauwanyi/events/' },
        ],
      }, {
        type: 'free',
        title: '免费',
        eventList: [
          {
            rank: 1,
            type: '展览',
            title: '再见捌捌陆Zone—台湾眷村文化园区常设展',
            link: 'http://event.moc.gov.tw/sp.asp?xdurl=ccEvent2016/ccEvent_cp.asp&cuItem=2489717&ctNode=676&mp=1',
          },
          {
            rank: 2,
            type: '展览',
            title: '从那日出之地-兰屿大船拜访号-Si Mangavang展',
            link: 'https://www.tacp.gov.tw/News/ExhibitionInfo?ID=abd05926-b37c-48ed-a966-4bfa49d1b648',
          },
          { rank: 3, type: '展览', title: '寺庙神像常设展（二馆二楼）', link: 'http://wood.mlc.gov.tw/' },
          {
            rank: 4,
            type: '亲子',
            title: '2021宜兰绮丽观光园区 ~绮丽好好玩！',
            link: 'https://ticket.com.tw/Application/UTK02/UTK0201_.aspx?PRODUCT_ID=N0NLFCFS',
          },
          { rank: 5, type: '研习课程', title: '魔幻珐琅/七宝烧体验课程', link: 'https://www.facebook.com/pg/juhauwanyi/events/' },
        ],
      }],
    };
  },
};
</script>

成果展示

好的！我知道有点丑，

不过美化的部份我们等之後有空再回头做啦~

https://ithelp.ithome.com.tw/upload/images/20211002/20140745p9EDjdyzAX.png

今天的文就到这边啦~

因为文章都是照着开发步骤纪录的，所以可能会有种

"咦? 上面不是说改这样，怎麽下面又说要改那样" 的感觉

没错！其实写程序很少会一步到位，以我自己来说，

都是＂达成指定目标＞重构＞前进下一个目标＞达成指定目标＂，这样的回圈在进行

那每次更改的部分，我都用注解标注在程序码内，

如果有不太能理解的，可以直接跳到最後一段，我有放上完整的程序码

ok~ 明天见！


<<:  Day17 用python写UI-聊聊Listbox基本操作

>>:  Day17-Webhook 实作（六）LINEBot 之 MessageBuilder（IV）

夜间模式真的对眼睛比较好吗? 详细整理(上)

重点摘要: 可靠的研究中，没有白底黑底对眼健康的直接支持或反对 蓝光已知影响睡眠周期 对眼睛好要: ...

Proxmox VE 安装虚拟机：Ubuntu Server 20.04

前一章我们将 Windows 10 成功的在虚拟机装安装起来，本章换个完全不同的作业系统来安装，这...

成员 17 人：60%的人在 10分钟的谈话中，至少会撒 1次谎

成员到了 17 人，你必须依靠「回报」进行专案控管、公司治理； 这时你发现， 回报不实，不常发生； ...

Ruby on Rails layout

只能⼀个版型吗？ 如果你喜欢，可以有多种款式的版型，预设的版型是 app/views/layouts...

简报版-第七章-从AI人脸技术加持!看「有影片将不再有真相!?」

其实原本最初规画想要做Index方式的纪录，然後多增加一些没写到的面向 不过，总是计画赶不上变化 ...