vue饿了么（三）--goods组件 & shopcart组件

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>

扫描二维码关注公众号，回复： 4268674 查看本文章

<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>