本篇文章次要来教大家实现一个美食我的项目的首页,文中附含局部性能实现的示例代码,有须要的敌人能够借鉴参考下,心愿可能有所帮忙

介绍:美食杰首页
这个是轮播图成果:利用了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' //引入的组件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;     })    }  }}</script>

注意事项:
在引入是肯定要留神引入css的门路,就从element-ui开始找看看没一个嵌套关系的文件夹名是不是始终,另外在最新版本的element-ui中theme-default就应该被改为theme-chal,特地须要留神的是默认的轮播是垂直的,如果想改为程度,那么须要将direction: 'horizontal'。

总结:
轮播图原理:对源数据作下解决,将开端数据复制一份,插入到最后面。将原来第一条数据复制到最初面,前面的图片在滑到后面图片的时候,重置下标,视图上就有限滚动了

以上就是js美食我的项目首页局部实现的性能代码及简介的具体内容,更多对于js我的项目首页局部性能实现的材料请关注segmentfault其它相干文章!