关于html: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 '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 我的项目首页局部性能实现的材料请关注 segmentfault 其它相干文章！