</div>
</template>
Shopcart组件是Goods组件的子组件，在Shopcart组件初始化的时候我们可以传入给其参数
poiInfo selectFoods.请求数据，声明方法与计算属性
<script>
import BScroll from "better-scroll";//滚动组件
import Shopcart from "components/Shopcart/Shopcart";//购物车
import Cartcontrol from "components/Cartcontrol/Cartcontrol";//控制商品数量按钮export default {
data() {
return {
container: {},
goods: [],
poiInfo: {},
listHeight: [],
menuScroll: {},
foodScroll: {},
scrollY: 0
};
},
components: {
BScroll,//引入组件
Shopcart,
Cartcontrol
},
created() {
this.$axios
.get("api/goods")
.then(response => {
let json = response.data;
if (json.code === 0) {
// 重点
this.container = json.data.container_operation_source;
this.goods = json.data.food_spu_tags;
this.poiInfo = json.data.poi_info;
this.$nextTick(function() {
this.initScroll();
// 左右联动
// 右->左
// 计算区间
this.caculateHeight();
});
}
})
.catch(function(error) {
// handle error
console.log(error);
});
},
computed: {
// 根据右侧判断左侧index
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
let start = this.listHeight[i];
let end = this.listHeight[i + 1];
if (this.scrollY >= start && this.scrollY < end) {
return i;
}
}
return 0;
},
selectFoods() {
let foods = [];
this.goods.forEach(good => {
good.spus.forEach(food => {
if (food.count > 0) {
foods.push(food);
}
});
});
return foods;
}
},
methods: {
head_bg(imgName) {
return "background-image: url(" + imgName + ");";
},
initScroll() {
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));
});
},
caculateHeight() {
let foodList = this.$refs.foodScroll.getElementsByClassName(
"food-list-hook"
);//获取到dom元素
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < foodList.length; i++) {
height += foodList[i].clientHeight;
this.listHeight.push(height);
}
// [0, 215, 1343, 2425, 3483, 4330, 5823, 7237, 8022, 8788, 9443] },
