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>