because the company uses other back-end frameworks and uses Vue as the front-end interface, vue and plug-ins are written in cdn and js on a page with no components.
are you hungry? when writing left and right menus, click on the left menu, the right side will automatically slide to the relevant items, but when you slide on the right, the acitve of the left menu does not follow the change.
is the index of the li on the right not transferred to the left? But you can get the
<div class="content">
<!---->
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="(food,index) in foods" @click="menuClick(index,$event)" :class="{"active": activeIndex == index}">
{{food.class}}
<i class="num"></i>
</li>
</ul>
</div>
<!---->
<div class="foods-wrapper" id="wrapper" ref="foodsWrapper">
<ul>
<li v-for="(food,index) in foods" :key="food.id" class="food-list-hook">
<div class="class-title">
{{food.class}}
</div>
<div v-for="food in food.list">
<div class="item">
<div class="itemleft" @click="menuShow(food)">
<div class="item-img">
<img :src="food.imgs" alt="">
</div>
</div>
<div class="itemright">
<div class="title">
{{food.name}}
</div>
<div class="price">
<i class="fa fa-cny"></i>
<span>
{{food.price}}
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>new Vue({
el: "-sharpapp",
data() {
return {
foods: [],
listHeight: [],
foodsScrollY: 0
}
},
created() {
axios.get("data.json").then(response = >{
this.foods = response.data.foods;
this.$nextTick(() = >{
this._initScroll(); // scroll
this._calculateHeight(); //
})
});
},
computed: {
activeIndex() {
for (let i = 0; i < this.listHeight.length; iPP) {
let topHeight = this.listHeight[i] let bottomHeight = this.listHeight[i + 1]
if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
return i
}
}
return 0
}
},
methods: {
_initScroll() {
this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
click: true
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3
});
//
this.foodsScroll.on("scroll", (pos) = >{
this.foodsScrollY = Math.abs(Math.round(pos.y))
})
},
_calculateHeight() {
let foodList = this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
let height = 0 this.listHeight.push(height) for (let i = 0; i < foodList.length; iPP) {
let item = foodList[i] height += item.clientHeight this.listHeight.push(height)
}
},
menuClick(index, event) {
if (!event._constructed) {
return
}
this.foodsScroll.scrollTo(0, -this.listHeight[index], 300)
}
}
});