html加css样式实现js美食项目首页示例代码

2024-12-14 11:42:09

介绍：美食杰首页

这个是轮播图效果：利用了element ui框架搭建的html、css样式，然后再通过vue指令和data存储数据和methods方法在操作data里面的数据来完成数据交互继而渲染到页面上就如下图。

这个是内容精选页效果：也是利用了element ui框架搭建的html、css样式

过程：

引用了element ui框架搭建的轮播图框架，利用数据交互完成效果。

先安装element ui，再main.js里面引入element ui

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

这是html结构

这是css样式：

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

<script>
import MenuCard from '@/components/menu-card.vue' //引入的组件1
import Waterfall from '@/components/waterfall.vue'//引入的组件2
import {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;
     })
    }
  }
}
</script>

注意事项：

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

总结：

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

以上就是js美食项目首页部分实现的功能代码及简介的详细内容，更多关于js项目首页部分功能实现的资料请关注我们其它相关文章！

用html+css+js实现的一个简单的图片切换特效

如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a
使用HTML+CSS+JS制作简单的网页菜单界面

写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器.ABROAD后台添加数据.百度图片搜索.sf发布博客文章时贴标签的样式--标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了. 1.HTML代码: <span class="tags"> <span>经济.金融类</span> <span>行政.人资类</span> <
JS+DIV+CSS排版布局实现美观的选项卡效果

本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
JS实现标签页效果(配合css)

实现的效果: 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在"标签1"上,则内容区域显示的内容为"我是内容1",并且"标签1"的颜色要比"标签2"和"标签3"深一些,同样鼠标移到"标签2"和"标签3"的时候显示"我是内容2"和"
Android 8.0安装apk的实例代码

android 8.0安装apk需要请求未知来源权限 //xml配置 <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/> /** * 检测版本8.0 */ public void checkOreo() { if (SdkVersionUtils.hasOreo()) {//8.0 //判断是否可以直接安装 boolean canInstall = getPackageM
JS+CSS实现大气的黑色首页导航菜单效果代码

本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
html加css样式实现js美食项目首页示例代码

介绍:美食杰首页这个是轮播图效果:利用了element ui框架搭建的html.css样式,然后再通过vue指令和data存储数据和methods方法在操作data里面的数据来完成数据交互继而渲染到页面上就如下图. 这个是内容精选页效果:也是利用了element ui框架搭建的html.css样式过程: 引用了element ui框架搭建的轮播图框架,利用数据交互完成效果. 先安装element ui,再main.js里面引入element ui import elementUi from
使用Dropzone.js上传的示例代码

本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l
JS中跳出循环的示例代码

1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each使用return true 终止本次循环计入下一个循环,return false终止整个循环. 函数返回值跟此处无关例: $.extend($.fn.datagrid.methods, { isChecked: function (dg, param) { var flag = false;//是否选中 var allRows = $(dg).datagri
IDEA 中创建Spring Data Jpa 项目的示例代码

一.IDEA 创建工程使用IDEA 创建工程的过程,使用文字做简单描述. 选择工程类别[Spring Initializr]. 设置工程的元数据[Metadata],根据自己的情况填写即可. 设置工程的依赖:在[Web]中选择"Spring Web";在[SQL]中选中"Spring Data JPA"."Spring Data JDBC"."MySQL Driver"."JDBC API".选中的可能有
在pycharm中创建django项目的示例代码

在pycharm中创建django项目的方法步骤,分享给大家,具体如下: 创建完成后,我们可以看看django项目是否可以启动在Terminal 中输入命令 python manage.py runserver 能看到一下界面证明启动成功在项目的时候肯定会用到数据库所以我们需要进入settings中更改数据库的配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': "django_test&qu
基于three.js编写的一个项目类示例代码

WebVR 在开始之前,先对WebVR进行介绍,WebVR是一个实验性的Javascript API,允许HMD(head-mounted displays)连接到web apps,同时能够接受这些设备的位置和动作信息.这让使用Javascript开发VR应用成为可能(当然已经有很多接口API让Javascript作为开发语言了,不过这并不影响我们为WebVR感到兴奋).而让我们能够立马进行预览与体验,移动设备上的chrome已经支持了WebVR并使手机作为一个简易的HMD.手机可以把屏幕分成左
js滚动条平滑移动示例代码

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下 html页 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/JavaScrip
非html5实现js版弹球游戏示例代码

开始前的html页面开始后的html游戏界面 html页面布局,即index.html文件源码如下: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co
使用非html5实现js板连连看游戏示例代码

向大家分享一款如何实现js版连连看游戏,如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http
vue.js实现表格合并示例代码

前言由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

html加css样式实现js美食项目首页示例代码

介绍：美食杰首页

过程：

注意事项：

总结：

相关推荐

随机推荐