(五)最简单的vue教程,开发自己的电影网站:开发列表页面

avatar

这一节开始开发我们的电影前面网站,我这里就以列表来举例说明

  1. 在TabBar.vue里引入List.vue
  2. 在List.vue里引用Item.vue组件
  3. 当点击TabBar.vue里的tab时,传个参数给List.vue里的一个方法
  4. 在List.vue里请求接口,然后将接口数据通过调用子组件(Item.vue)里的方法的方式传给子组件供子组件展示

大致思路就是这样的,下面上代码

TabBar.vue

<template>
<div>
  <div class="tabbar">
    <div
      v-for="(item, index) in tabs"
      :key="item.id"
      :class="active == index ? 'active': ''"
      @click="changeTab(index)">{{item.name}}</div>
  </div>
  <List :tab="tabs[active].tab" ref="list"/>
</div>
</template>

<script>
import List from "./List.vue";
export default {
  name: "tabbar",
  components: {
    List
  },
  data() {
    return {
      active: 0,
      tabs: [
        {
          name: "最新",
          tab: "newest"
        },
        {
          name: "国产",
          tab: "china"
        },
        {
          name: "日韩",
          tab: "rihan"
        },
        {
          name: "欧美",
          tab: "oumei"
        },
        {
          name: "综合",
          tab: "complex"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    changeTab(index) {
      this.active = index;
      this.$nextTick(() => {
        this.$refs.list.fetchData(this.tabs[index].tab);
      });
    }
  }
};
</script>

<style scoped>
.tabbar {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #333;
}
.tabbar > div {
  cursor: pointer;
  text-align: center;
  flex: 1;
  padding: 5px 0;
  border-right: 1px solid #333;
}
.tabbar > div:last-child {
  border: 0;
}
.tabbar > div.active {
  color: #fff;
  background-color: #000;
}
</style>

List.vue

<template>
<div>
  <div class="list">
    <Item ref="item"/>
  </div>
</div>
</template>

<script>
import axios from "axios";
import Item from "./Item";
export default {
  name: "list",
  components: {
    Item
  },
  props: {
    tab: String
  },
  data() {
    return {
      currentTab: "",
      pageNo: 1,
      list: []
    };
  },
  mounted() {
    this.fetchData(this.tab);
  },
  methods: {
    request(tab) {
      axios
        .get("http://localhost:3000/list", {
          params: {
            type: tab,
            pageNo: this.pageNo
          }
        })
        .then(({ data }) => {
          this.list = this.pageNo === 1 ? data : this.list.concat(data);
          this.$nextTick(() => {
            this.$refs.item.loadData(this.list);
          });
        });
    },
    fetchData(tab) {
      this.list = [];
      this.$nextTick(() => {
        this.$refs.item.loadData(this.list);
      });
      this.currentTab = tab;
      this.pageNo = 1;
      // 模拟网络延时
      setTimeout(() => {
        this.request(tab);
      }, 1000);
    }
  }
};
</script>

<style scoped>
</style>

Item.vue

<template>
<div>
  <div class="item" @click="toDetail(item.url)" v-for="item in list" v-bind:key="item.id">
    {{item.title}}
  </div>
</div>
</template>

<script>
export default {
  name: "item",
  data() {
    return {
      list: []
    };
  },
  mounted() {},
  methods: {
    loadData(list) {
      this.list = list;
    }
  }
};
</script>

<style scoped>
.item {
  cursor: pointer;
  padding: 10px 15px;
  border-bottom: 1px solid #bbb;
}
.item:hover {
  background-color: #aaa;
}
</style>

至此一个简单的列表页就写好了

0 条评论

目前还没有回答,快来帮帮TA吧!

添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录