1.goods.vue滚动实现:"better-scroll"
1.package.json中引入"better-scroll"。cnpm install --------》 npm run dev
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"better-scroll":"^0.1.7"
},
2.goods.vue引入
<script type="text/javascript">
import axios from 'axios';
import BScroll from 'better-scroll';
3.滚动的绑定---》数据准备------》滚动初始化
这里绑定DOM不再使用el,改用ref
<div class="goods">
<div class="menu-wrapper" ref='menuWrapper'> <!-- 这里必须用驼峰形式 -->
<ul>
<li v-for='(item,index) in goods' class="menu-item" :class="{'current':currentIndex===index}" @click='selectMenu(index,$event)'>
<span class="text border-1px">
<span v-show='item.type>0' class='icon' :class='classMap[item.type]'></span>{{item.name}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper" ref='foodsWrapper'>
<ul>
<li v-for='item in goods' class="food-list food-list-hook">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for='food in item.foods' class="food-item">
<div class="icon">
<img width="57" height="57" :src="food.icon" alt="">
</div>
methods中定义方法。(这里的probeType不知道是什么意思@——@。)
methods: {
selectMenu(index,event) {
if(!event._constructed) {//非自定义点击事件的情况下return掉,这样pc端就不会检测到两次点击事件。
return;
}
// console.log(index);
let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');//获取的是一大类商品的list
let el=foodList[index];
this.foodsScroll.scrollToElement(el,1000);
},
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper,{
click: true //这样鼠标点击才能生效
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
probeType: 3//右侧滚动时,实时检测滚动的位置.
});
this.foodsScroll.on('scroll',(pos) => {
this.scrollY = Math.abs(Math.round(pos.y));//scrollY取到了右侧滚动的高度,需要与左侧的索引做一个映射。
});
},
_calculateHeight() {
let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');//获取的是一大类商品的list
let height = 0;
this.listHeight.push(height);;
for(let i=0;i<foodList.length;i++){
height+=foodList[i].clientHeight;
this.listHeight.push(height);
}
}
}
定义相关数据
data() {
return {
goods: [],
listHeight: [],//右侧渐进高度
scrollY: 0
};
},
思路:listHeight存储右侧商品大类的高度;根据scrollY取得的滚动高度,判断处于大类商品中的哪一类。
computed:不改变原始数据的情况下处理得出新数据。
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;
}
},
menu定义特殊高亮样式 这里index的使用摒弃vue1.0的$index 应当遵从vue2.0的(item,index)。
<div class="menu-wrapper" ref='menuWrapper'> <!-- 这里必须用驼峰形式 -->
<ul>
<li v-for='(item,index) in goods' class="menu-item" :class="{'current':currentIndex===index}" @click='selectMenu(index,$event)'>
<span class="text border-1px">
<span v-show='item.type>0' class='icon' :class='classMap[item.type]'></span>{{item.name}}
</span>
</li>
</ul>
</div>
点击左侧menu 右侧自动滚动 用到scrollToElement()方法
selectMenu(index,event) {
if(!event._constructed) {//非自定义点击事件的情况下return掉,这样pc端就不会检测到两次点击事件。
return;
}
// console.log(index);
let foodList=this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');//获取的是一大类商品的list
let el=foodList[index];
this.foodsScroll.scrollToElement(el,1000);
},
2.shopcart组件
组件之间数据的传递。
shopcart组件中需要获取seller商家信息
1)在app.vue中把seller传递到goods组件<router-view seller="seller"></router-view>
2)在goods.vue把seller传递到shopcart.vue组件
<shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
<template>
<div class="shopcart">
<div class="content">
<div class="content-left">
<div class="logo-wrapper">
<div class="logo">
<i class="icon-shopping_cart"></i>
</div>
</div>
<div class="price">¥{{0}}</div>
<div class="desc">另需配送费¥{{deliveryPrice}}元</div>
</div>
<div class="content-right">
<div class="pay">
¥{{minPrice}}元起送
</div>
</div>
</div>
</div>
</template>
shopcart 接收
<script type="text/javascript">
export default {
props: {
selectFoods: {
type: Array,//如果需要接收的数据是Array,那么default必须是一个函数。
default() {
return [];
}
},
deliveryPrice: {
type: Number,
default: 0
},
minPrice: {
type: Number,
default: 0
}
}
}
</script>