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⽅法
// 引⼊注册使⽤
好看的css代码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)
// uList=data.list；当传了页码就不能这么赋值了
// this.al/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.$refs.waterfall.isloading=false;
})
}
}
}
</script>
注意事项：
在引⼊是⼀定要注意引⼊css的路径，就从element-ui开始看看没⼀个嵌套关系的⽂件夹名是不是⼀直，另外在最新版本的element-ui中theme-default就应该被改为theme-chal，特别需要注意的是默认的轮播是垂直的，如果想改为⽔平，那么需要将direction: 'horizontal'。
总结：
轮播图原理：对源数据作下处理，将末尾数据复制⼀份，插⼊到最前⾯。将原来第⼀条数据复制到最
后⾯，后⾯的图⽚在滑到前⾯图⽚的时候，重置下标，视图上就⽆限滚动了
以上就是js美⾷项⽬⾸页部分实现的功能代码及简介的详细内容，更多关于js项⽬⾸页部分功能实现的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。