标签：区间 img elements play const olly 执行 lis ssm
goods组件显示的区域是固定的，也没有滚动条，所以是采用绝对布局的，左右分为menu栏和foods栏，左边固定布局，右边自适应布局，采用flex布局。
写CSS样式的时候，尽量用class，少用tag，因为class的查找效率优于tag，尤其是嵌套层级比较多的时候。左边的menu栏有些是一行有些是多行，要做到不管单行还是多行都是垂直是居中，可以用display：table，table布局是实现垂直居中的有效布局。menu-item设置display:table,text设置display:table-cell,vertical-align:center
<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>
右边的food栏用两个<ul v-for="XXX">来实现遍历
每个食品的显示分为左边icon和右边的content，用flex布局来实现，左边固定宽度，右边自适应布局。goods组件的右边的food栏，除了最后一个食品的下面都有1px的border，要去掉最后一个食品的border，课程中是在mixin中写了一个border-none()的样式，把after的伪类设置为display：none。也可以用另一种方式来实现，由于border是通过after伪类来实现的，那么如果给最后一个食品的after伪类设置为border:none应该就可以去掉border了。
border-none()
&:after
display: none
food-item设置了18px的margin，但是由于相邻两个food-item的上下margin是会重合的，所以要再设置一个padding-bottom，但是最后一个food-item就会有一个18px的margin-bottom和18px的padding-bottom，所以最后一个fodd-tiem的margin-bottom要设置为0。
.food-item
display: flex
margin: 18px
padding-bottom: 18px
border-1px(rgba(7, 17, 27, 0.1))
用better scroll库实现滚动效果， new BScroll（）有两个参数，第一个是dom对象，第二个是可选对象。给dom对象增加ref属性，<div class="foods-wrapper" ref="menuWrapper">，在js中用this.$refs获取dom对象，this.meunScroll = new BScroll(this.$refs.menuWrapper, {});
DOM对象是异步更新的，所以要把滚动的初始化函数放在￥nextTick()函数中，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。
要实现左边的menu和右边的food的连动，要计算出右边每一个类的food的高度区间，用getElementsByClassNames获取每一个类food的DOM对象，用函数clientHeight得到的DOM对象的高度。
_calculateHeight() {
let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
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);
}
}
然后拿到实时的y值与高度区间值对比，在BScroll函数中传入参数probeType:3就可以获取实时滚动的位置，用this.foodsscroll.on()监听滚动事件
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
click: true,
probeType: 3
});
this.foodsScroll.on(‘scroll‘, (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
});
},
当food栏滚动时，获取当前的坐标，与区间对比，得到对应的index，更新左边的menu栏，对应index的menu-item会获得一个current的class。用better Scroll之后，点击时会有两个事件，一个是浏览器原生事件，一个是better Scroll派发的时间，其中浏览器原生事件都没有_constructed属性,better scroll派发的事件有_constructed属性。
<li v-for="(item, index) in goods" class="menu-item" :class="{‘current‘:currentIndex===index}" @click="selectMenu(index, $event)">
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，通过scrollToElement把右边的列表滚动到对应的位置
selectMenu(index, event) {
if (!event._constructed) {
return;
}
let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
let el = foodList[index];
this.foodsScroll.scrollToElement(el, 300);
},
购物车组件开发
标签：区间 img elements play const olly 执行 lis ssm
原文地址：http://www.cnblogs.com/dingzibetter/p/7267094.html
