介紹：美食杰首頁
這個是輪播圖效果：利用了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'，
總結：
輪播圖原理：對源資料作下處理，將末尾資料復制一份，插入到最前面，將原來第一條資料復制到最后面，后面的圖片在滑到前面圖片的時候,重置下標，視圖上就無限滾動了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302530.html
標籤：其他
上一篇：美食杰 login的實作效果
下一篇：基于三層架構+java+jsp+servlet+jQuery+bootstrap——web資源庫專案（注冊功能demo)