Shulou(Shulou.com)06/03 Report--

This article will explain in detail about html plus css style how to achieve js food project home page, Xiaobian think quite practical, so share to you as a reference, I hope you can have some harvest after reading this article.

Use the html and css styles built by the element ui framework, and then use the vue command and data storage data and methods to complete the data interaction and render it to the page as shown below.

This is the content selection page effect: it is also the html and css styles built by using the element ui framework.

Process:

The carousel graph framework built by element ui framework is referenced, and the effect is completed by data interaction.

Install element ui first, then introduce element ui into main.js

import elementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(elementUi)

This is html structure

这是css样式：

数据交互过程（要搭配写好的组件）：

import MenuCard from '@/components/menu-card.vue' //引入的组件1import Waterfall from '@/components/waterfall.vue'//引入的组件2import {getBanner,getMenus} from '@/service/api.js'//引入的封装好的api方法// 引入 注册 使用export default { name: 'home', components: { MenuCard: MenuCard, Waterfall }, data(){ return { banners:[], menuList:[], page:1, pages:5 } }, mounted(){ getBanner().then(({data})=>{ this.banners=data.list; // console.log(this.banners) }), // 1. getMenus({page:this.page}).then(({data})=>{ console.log(data) // this.menuList=data.list;当传了页码就不能这么赋值了 this.menuList=data.list;//存了第一页的数据 // this.pages=Math.ceil(data.total/data.page_size) }) }, methods:{ loadingMenuHanle(){ console.log('在外部监听的滚动') this.page++; // 2. 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);//在第一次数据加载完成后再继续添加(push)渲染五条数据 this.$refs.waterfall.isloading=false; }) } }}注意事项：

在引入是一定要注意引入css的路径，就从element-ui开始找看看没一个嵌套关系的文件夹名是不是一直，另外在最新版本的element-ui中theme-default就应该被改为theme-chal，特别需要注意的是默认的轮播是垂直的，如果想改为水平，那么需要将direction: 'horizontal'。

总结：

轮播图原理：对源数据作下处理，将末尾数据复制一份，插入到最前面。将原来第一条数据复制到最后面，后面的图片在滑到前面图片的时候,重置下标，视图上就无限滚动了

关于"html加css样式如何实现js美食项目首页"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.