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項目首頁部分功能實現的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Vue前端整合Element Ui的教程詳解
- vue項目實現分頁效果
- python+selenium對table表和分頁處理
- element tree樹形組件回顯數據問題解決
- uni-app實現數據上拉加載更多功能實例