上篇我们将菜单栏,商品展示结构完成,本次我们为这两个部分接入数据。
<script>
// 导入BScroll 滚动组件
import BScroll from "better-scroll";
// 导入Food 商品页面
import Food from "components/Food/Food";
export default {
data() { //准备需要的数据,初始化组件。
return {
container: {},
goods: [],
poiInfo: {},
listHeight: [],
scrollY: 0,
menuScroll: {},
foodScroll: {},
selectedFood: {}
};
},
//引用组件
components: {
BScroll,
Food
}
};
</script>
之前我们说过在created钩子,mounted钩子内可以发起请求,请求需要的数据。本次我们在created钩子内发起get请求,获取数据:
created() {
//通过that改变.then中的this指向
var that = this;
// 通过axios发起get请求
this.$axios
.get("/api/goods")
.then(function(response) {
// 获取到数据
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;
// 调用滚动的初始化方法
// that.initScroll();
// 开始时,DOM元素没有渲染,即高度是问题
// 在获取到数据后,并DOM已经被渲染,表示列表高度是没问题的
// nextTick
that.$nextTick(() => {
// DOM已经更新
that.initScroll();
// 计算分类区间高度
that.calculateHeight();
});
}
})
.catch(function(error) {
// 出错处理
console.log(error);
});
},
注意$nextTick()用法,在dom更新后。我们执行初始化滚动函数。
https://cn.vuejs.org/v2/api/#vm-nextTick
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
});
// 添加滚动监听事件
this.foodScroll.on("scroll", pos => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
calculateHeight() {
// 通过$refs获取到对应的元素
let foodlist = this.$refs.foodScroll.getElementsByClassName(
"food-list-hook"
);
// 添加到数组区间
// 0~216 第一个区间(专场)
// 217~1342 第二个区间(热销)
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"
);
// 根据下标,滚动到相对应的元素
let el = foodlist[index];
// 滚动到对应元素的位置
this.foodScroll.scrollToElement(el, 250);
}
},
computed: {
currentIndex() {
// 根据右侧滚动位置,确定对应的索引下标
for (let i = 0; i < this.listHeight.length; i++) {
// 获取商品区间的范围
let height1 = this.listHeight[i];
let height2 = this.listHeight[i + 1];
// 是否在上述区间中
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
return i;
}
}
return 0;
}
},
以上我们完成了商品页面数据的交互,下一章节我们将加入商品控件,与购物车。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。