上篇我們將菜單欄，商品展示結(jié)構(gòu)完成，本次我們?yōu)檫@兩個部分接入數(shù)據(jù)。

菜單欄接入數(shù)據(jù)

導(dǎo)入組件，定義需要的數(shù)據(jù)格式

<script> // 導(dǎo)入BScroll 滾動組件 import BScroll from "better-scroll"; // 導(dǎo)入Food 商品頁面 import Food from "components/Food/Food"; ? export default {data() { //準備需要的數(shù)據(jù),初始化組件。return {container: {},goods: [],poiInfo: {},listHeight: [],scrollY: 0,menuScroll: {},foodScroll: {},selectedFood: {}};},//引用組件components: {BScroll,Food} }; </script>

通過created鉤子發(fā)起請求獲取數(shù)據(jù)

之前我們說過在created鉤子，mounted鉤子內(nèi)可以發(fā)起請求，請求需要的數(shù)據(jù)。本次我們在created鉤子內(nèi)發(fā)起get請求，獲取數(shù)據(jù)

created() {//通過that改變.then中的this指向var that = this; ?// 通過axios發(fā)起get請求this.$axios.get("/api/goods").then(function(response) {// 獲取到數(shù)據(jù)var dataSource = response.data;if (dataSource.code == 0) {that.container = dataSource.data.container_operation_source;that.goods = dataSource.data.food_spu_tags;that.poiInfo = dataSource.data.poi_info; ?// 調(diào)用滾動的初始化方法// that.initScroll();// 開始時，DOM元素沒有渲染，即高度是問題// 在獲取到數(shù)據(jù)后，并DOM已經(jīng)被渲染，表示列表高度是沒問題的// nextTickthat.$nextTick(() => {// DOM已經(jīng)更新that.initScroll(); ?// 計算分類區(qū)間高度that.calculateHeight();});}}).catch(function(error) {// 出錯處理console.log(error);});},

注意$nextTick()用法，在dom更新后。我們執(zhí)行初始化滾動函數(shù)。

https://cn.vuejs.org/v2/api/#vm-nextTick

通過methods定義我們需要的方法

• 通過head_bg(imgName)方法獲取到商品的背景圖片；
• 方法initScroll()用來初始化滾動，https://cn.vuejs.org/v2/api/#ref;
• calculateHeight()方法獲取左側(cè)每一個菜單欄目的元素；
• 使用selectMenu()方法，在我們點擊菜單后，右側(cè)顯示對應(yīng)的商品信息；

?methods: {head_bg(imgName) {return "background-image: url(" + imgName + ");";},// 滾動的初始化initScroll() {// ref屬性就是用來綁定某個dom元素或某個組件，然后在this.$refs里面this.menuScroll = new BScroll(this.$refs.menuScroll, {click: true});this.foodScroll = new BScroll(this.$refs.foodScroll, {probeType: 3,click: true}); ?// 添加滾動監(jiān)聽事件this.foodScroll.on("scroll", pos => {this.scrollY = Math.abs(Math.round(pos.y));});},calculateHeight() {// 通過$refs獲取到對應(yīng)的元素let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook"); ?// 添加到數(shù)組區(qū)間// 0~216 第一個區(qū)間(專場)// 217~1342 第二個區(qū)間(熱銷)let height = 0;this.listHeight.push(height);for (let i = 0; i < foodlist.length; i++) {let item = foodlist[i]; ?// 累加height += item.clientHeight; ?this.listHeight.push(height);}},selectMenu(index) { ?let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook"); ?// 根據(jù)下標，滾動到相對應(yīng)的元素let el = foodlist[index];// 滾動到對應(yīng)元素的位置this.foodScroll.scrollToElement(el, 250);}},

computed定義屬性

• currentIndex屬性綁定在左側(cè)菜單欄，使菜單元素與右側(cè)內(nèi)容作為對應(yīng)，展示給用戶。

?computed: {currentIndex() {// 根據(jù)右側(cè)滾動位置，確定對應(yīng)的索引下標for (let i = 0; i < this.listHeight.length; i++) {// 獲取商品區(qū)間的范圍let height1 = this.listHeight[i];let height2 = this.listHeight[i + 1]; ?// 是否在上述區(qū)間中if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {return i;}} ?return 0;}},

以上我們完成了商品頁面數(shù)據(jù)的交互，下一章節(jié)我們將加入商品控件，與購物車。

總結(jié)

以上是生活随笔為你收集整理的vue展示日历 考勤展示_VUE实战—菜单栏商品展示数据交互（8）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。