文章目錄
- 前言
- 一、介紹美食杰專案首頁是怎么實作的？
- 二、步驟
- 1.展示美食杰首頁效果
- 2.代碼
- 3.注意事項
- 總結
前言
本文想給大家介紹美食杰專案實作效果，首先介紹的是美食杰首頁實作效果以及主要代碼
一、介紹美食杰專案首頁是怎么實作的？
1.先向后端請求資料，然后獲取資料，渲染資料
2.通過Element ui 組件庫來實作輪播圖效果
3.重繪之后會繼續加載出圖片
二、步驟
展示美食杰首頁效果:
代碼:
1.在main.js里面引入Element UI:
import ElementUI from 'element-ui';
2.在終端里面下載Element UI 組件庫：
npm i element ui
3.在header.vue組件中寫如下代碼：
<template>
<div class="home">
<!-- 輪播 start -->
<el-carousel :interval="5000" type="card" height="300px">
<el-carousel-item v-for="item in banners" :key="item.id">
<!--/detail?menuId=5d83bfba2f7cb93a4009cf98-->
<router-link :to="{ name: 'detail', query: { memuId: item._id } }">
<img :src="item.product_pic_url" width="100%" alt="" />
</router-link>
</el-carousel-item>
</el-carousel>
<!-- 輪播 end -->
<!-- 內容精選 瀑布流形式 start -->
<div>
<h2>內容精選</h2>
<!-- :info='info' -->
<waterfall ref="waterfall" @view="loadingMenuHanle">
<menu-card :margin-left="13" :info="menuList"></menu-card>
</waterfall>
</div>
<!-- 內容精選 瀑布流形式 end -->
</div>
</template>
<script>
import MenuCard from "@/components/menu-card.vue";
import Waterfall from "@/components/waterfall.vue";
import { getBanner, getMenus } from "@/service/api.js";
// 引入 注冊 使用
export default {
name: "home",
components: {
MenuCard: MenuCard,
Waterfall,
},
data() {
return {
banners: [],
menuList: [],
page: 1,
pages: 3,
};
},
mounted() {
getBanner().then(({ data }) => {
console.log(data);
this.banners = data.list;
console.log(this.banners);
});
getMenus({ page: this.page }).then(({ data }) => {
console.log(data);
this.menuList = data.list;
this.pages = Math.ceil(data.total / data.page_size);
});
},
methods: {
loadingMenuHanle() {
console.log("在外部監聽的滾動");
this.page++;
if (this.page > this.pages) {
this.$refs.waterfall.isloading = false;
return;
}
this.$refs.waterfall.isloading = true;
getMenus({ page: this.page }).then(({ data }) => {
this.menuList.push(...data.list);
this.$refs.waterfall.isloading = false;
});
},
},
};
</script>
<style lang="stylus">
.home
h2
text-align center
padding 20px 0;
.el-carousel__item h3
color #475669
font-size 14px
opacity 0.75
line-height 200px
margin 0
.el-carousel__item:nth-child(2n)
background-color #99a9bf
.el-carousel__item:nth-child(2n+1)
background-color #d3dce6
</style>
注意事項：
1.在組件上總是必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態
2.渲染資料的時候注意查看data中的資料
總結
以上就是今天要講的內容，本文僅僅簡單介紹了美食杰專案首頁，用vue框架來寫的，寫輪播圖的時候用到了Element UI，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/302551.html
標籤：其他