goods

作者: dsx | 来源:发表于2017-11-27 15:30 被阅读9次

day012 商品列表的和前段的衔接
goods
Goods
list集合取交集
07、Vue-Goods组件(商品列表)《饿了吗》
07、Vue-Goods组件(商品列表)《饿了吗》
laravel 中文排序 orderByRaw
懂你英语 Level4-Unit 3 3/4 vocabular
懂你英语 Level4 Unit3 Part3 Vocabula
十四.Model的实例化方式

<template>
<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" ref="menuList">
<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{ item.name }}
</span>
</li>
</ul>
</div>
<div class="food-wrapper" ref="foodWrapper">
<ul>
<li v-for="item in goods" class="food-list" ref="foodList">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for="food in item.foods" class="food-item">
<div class="icon">
<img :src="food.icon" width="57" height="57"/>
</div>
<div class="content">
<div class="name">{{food.name}}</div>
<p class="dec">{{food.description}}</p>
<div class="extra">
<span class="sellCount">月售{{food.sellCount}}份</span>
<span class="rating">好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">￥{{food.price}}</span>
<span v-show="food.oldPrice" class="oldPrice">￥{{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>

</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
const ERROK = 0
export default {
props: {
seller: {
type: Object
}
},
data() {
return {
goods: [],
listHeight: [], // 定义一个变量数组来存储每个item的高度
scrollY: 0 // 滚动的y轴坐标
}
},
created() {
this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
this.$http.get('/api/goods').then((response) => {
response = response.body
if(response.errno === ERROK){
this.goods = response.data
console.log(response.data)
this.$nextTick(() => {
this._initScroll()
this._calculateHeight()
})
}
})
},
computed: {
// 3.计算menu当前的index
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)) {
this._followScroll(i)
return i
}
}
return 0
}
},
methods: {
// 6. 点击某个menu，foodList列表跳转
selectMenu(index, event) {
// 解决浏览器点击事件响应两次的问题
if(event._constructed) {
return
}
let foodList = this.$refs.foodList
let el = foodList[index]
this.foodsScroll.scrollToElement(el, 300)
},
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
this.foodsScroll = new BScroll(this.$refs.foodWrapper, {
click: true,
probeType: 3 // 探针，实时监听滚动位置
})
// 2.获取滚动的高度
this.foodsScroll.on('scroll', (pos) => {
if(pos.y <= 0) {
this.scrollY = Math.abs(Math.round(pos.y))
}
})
},
// 1.计算每个item的高度，记得在li里面添加ref标签来获取dom
_calculateHeight() {
let foodList = this.$refs.foodList // 获取food列表的DOM
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)
}
},
// 4.menu滚动到制定位置
_followScroll(index) {
let menuList = this.$refs.menuList
let el = menuList[index]
this.menuScroll.scrollToElement(el, 300, 0, -100)
}
}
}
</script>