【vue】饿了吗项目 – goods商品列表开发
（PS：结合自己这几天看的，以及前人给出的经验，借鉴他人的博客，总结出下面的内容）
1.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
- flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
- flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
- flex-basis 项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em”或任何其他长度单位的数字。
px和emde 区别：
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
参考：https://blog.csdn.net/chenjuan1993/article/details/81356497
2.采用绝对定位，相对于父元素
.good
display： flex
position： absolute
width： 100%
top： 174px
bottom： 46px
overflow： hidden3.使用vue-resourse获取json并应用到模板
现在越来越多的数据传输方式都是json数据格式，包括用jquery开发时，也有很好用的$.ajax来进行数据请求与处理，那么vue-resource提供了一种类似的，并且api更加简洁易用，压缩后文件更小。配合ES 6的Lambda写法，更加优雅
官网：https://github.com/pagekit/vue-resource/blob/master/docs/http.md
props: {
seller: {
type: Object
}
},
data () {
return {
goods: [], //一开始goods为空
listHeight: [],
scrolly: 0,
selectedFood: {}
};
},
created() { //当这个组件被调用的时候，通过后端获得数据赋值给goods
this.$http.get(‘/api/goods‘).then((response) => { // ‘/api/goods‘请求的是data.json下的goods数组
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
this.$nextTick(() => { //可以用 $nextTick 來确保Dom变化后再执行一些事情
this._initScroll();
this._calculateHeight();
});
}
});this.classMap = [‘decrease‘, ‘discount‘, ‘special‘, ‘invoice‘, ‘guarantee‘];
},注：vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，它的基本用法可以参考：http://www.kancloud.cn/yunye/axios/234845
4.遍历取数据
<span class="text">
<span v-show="item.type>0" class=" icon" :class="classMap[item.type]"></span>{{item.name}}
</span> classMap[item.type]是一个数组，通过item.type去取对应的class，item.type是data.json中mock的数据
5.display table
此元素会作为块级表格来显示（类似
），表格前后带有换行符。在table中可用vertical-align：middle实现垂直居中
6.添加better-scroll依赖
链接：https://github.com/ustbhuangyi/better-scroll
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="(item, index) in goods" class="menu-item border-1px" :class
{‘current‘:currentIndex === index}" @click="selectMenu(index, $event)">
<span class="text">
<span v-show="item.type>0" class=" icon" :class="classMap[item.type]" </span>{{item.name}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper" ref="foodWrapper">
<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" @click="selectFood(food, $event)">
<div class="icon">
<img :src="food.icon" alt="" width="57">
</div>
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}</p>
<div class="extra">
<span class="count">月售{{food.sellCount}}</span><span class="count">好评{{food.rating}}</span>
</div>
<div class="price">
<span class="now">￥{{food.price}}</span><span class="old" v-show
="food.oldPrice">￥{{food.oldPrice}}</span>
</div>
<div class="cartControl-wrapper">
<cartControl :food="food" @increment="incrementTotal"></cartControl>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>6.1 $refs 的使用是vue 2 操作dom的一种方式
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:
_initScroll(){
//初始化scroll区域
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true //结合BScroll的接口使用,是否将click事件传递,默认被拦截了
});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
probeType: 3 //结合BScroll的接口使用,3实时派发scroll事件，探针的作用
});
//结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标，当滚动时能实时暴露出scroll
this.foodsScroll.on(‘scroll‘, (pos) => { //事件的回调函数
this.scrollY = Math.abs(Math.round(pos.y));//滚动坐标会出现负的,并且是小数,所以需要处理一下，实时取得scrollY
}) }vue中更改数据，DOM会跟着做映射，但vue更新DOM是异步的，用 $nextTick ()来确保Dom变化后能调用到_initScroll()方法。调用_initScroll()方法能计算内层ul的高度，当内层ul的高度大于外层wrapper的高度时，可以实现滚动。
6.2 左右两边联动
在vue实例生命周期的开始created分别加载 _initScroll 和 _calculateHeight
- 通过 _calculateHeight 计算foods内部每一个块的高度,组成一个数组listHeight
- 在_initScroll里面,设置了bscroll插件的一个监听事件scroll,将food区域当前的滚动到的位置的y坐标设置到一个vue实例属性scrollY： this.scrollY = Math.abs(Math.round(pos.y));(取整舍入操作)
- 通过计算属性currentIndex,获取到food滚动区域对应的menu区域的子块的索引,然后通过设置一个class来做样式切换变化 :class=”{‘current‘:currentIndex === index} ,实现联动
另外当点击menu 区域的时候,会触发selectMenu事件,也会根据点击到的menu子块的索引然后去触发food区域滚动到对应的高度区块区间 this.foodsScroll.scrollToElement(el, 300);scrollToElement()：是better-scroll中的方法，滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数
这样完成整个对应
_calculateHeight()方法计算各个右侧区间的高度
_calculateHeight(){
let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘); //获取每一个food的dom对象
let height = 0;
this.listHeight.push(height); //初始化第一个高度为0
for (let i = 0; i < foodList.length; i++) {
let item = foodList[i]; //每一个item都是刚才获取的food的每一个dom
height += item.clientHeight; //主要是为了获取每一个foods内部块的高度
this.listHeight.push(height);
}
}
}实时取得scrollY的值后，需要与左边进行映射，利用计算属性：
**computed: {
currentIndex(){ //计算到达哪个区域的区间的时候的对应的索引值
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i]; //当前menu子块的高度
let height2 = this.listHeight[i + 1]; //下一个menu子块的高度
//滚动到底部的时候,height2为undefined,需要考虑这种情况
//需要确定是在两个menu子块的高度区间
if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
return i; //返回这个menu子块的索引
}
}
return 0;
},
selectFoods() { //自动将所有的goods.food添加一个count属性,方便做数量运算
let foods = [];
this.goods.forEach((good) => {
good.foods.forEach((food) => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
}**:class=”{‘current‘:currentIndex === index}”当currentIndex === index时才设置current这个class
点击左侧 ，右侧响应：
关于在selectMenu中点击,在pc界面会出现两次事件,在移动端就只出现一次事件的问题:
原因:bsScrooler会监听事件(例如touchmove,click之类),并且阻止默认事件(prevent stop),并且他只会监听移动端的,pc端的没有监听
在pc页面上 bsScroller也派发了一次click事件,原生也派发了一次click事件
//bsScroll的事件,有_constructed: true
MouseEvent {isTrusted: false, _constructed: true, screenX: 0, screenY: 0, clientX: 0…}
//pc的事件
MouseEvent {isTrusted: true, screenX: -1867, screenY: 520, clientX: 53, clientY: 400…}解决:针对bsScroole的事件,有_constructed: true,所以做处理,return掉非bsScroll的事件
selectMenu(index, event){
if (!event._constructed) { //去掉自带的click事件点击，即pc端直接返回
return;
}
let foodsList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
let el = foodsList[index];
//类似jump to的功能,通过这个方法,跳转到指定的dom
this.foodsScroll.scrollToElement(el, 300);
},7.shopcart组件
也是采用flex布局，右侧部分固定宽度（flex: 0 0 105px）(width :105px)，左边自适应宽度（flex: 1）
采用固定定位，定位在底部（position: fixed）
横向排列display：inline-block
包含购物车图标的div超出了父元素的高度，我们使用position：relative，并设置top为负来实现
box-sizing: border-box;(IE盒模型) 则div 设置的宽高将包含 边框及 padding
border-radius 50%，形成一个圆
选择了多少商品：定义成数组，底栏其余部分的变化都基于这个对象的变化而变化
selectFoods: {
type: Array,
default() {
return [{price: 20, count: 2}];
}
}计算部分（都基于selectFoods进行相应计算）computed中的函数可以直接在Tempplate中以指针的形式引用
computed: {
totalPrice() {//计算总价，超过起送额度后提示可付款
let total = 0;
this.selectFoods.forEach((food) => {
total += food.price * food.count;
});
return total;
}, totalCount() {//计算选中的food数量，在购物车图标处显示，采用绝对定位，top：0；right：0；显示在购物车图标右上角
let count = 0;
this.selectFoods.forEach((food) => {
count += food.count;
});
return count;
}
控制底部右边内容随food的变化而变化，payDesc()控制显示内容，payClass()添加类调整显示样式
在template中
<div class="pay" :class="payClass">
{{payDesc}}
</div> 在computed中：
payDesc() {
if (this.totalPrice === 0) {
return `￥${this.minPrice}元起送`; //这里使用的是es6中的反引号
} else if (this.totalPrice < this.minPrice) {
let diff = this.minPrice - this.totalPrice;
return `还差￥${diff}元起送`;
} else {
return ‘去结算‘; //单引号，单引号和反引号不同
}
},
payClass() {
if (this.totalPrice < this.minPrice) {
return ‘not-enough‘;
} else {
return ‘enough‘;
}
}总结：通过以上学习我们能发现，selectFoods()的变化起着关键作用，它的变化会引起DOM的变化，并最终体现到界面上，而我们不用关注DOM内部的具体实现，这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。
8 cartcontrol组件，它是shopcart的子组件
可以给按钮增加padding，方便用户点击
this.foodScroll = new BScroll(this.$refs.foodWrapper, {
probeType: 3,
click: true
});click: true 是否派发click事件
通过import Vue from ‘vue‘;使用set接口，通过vue.set()添加属性，当它变化时就能被检测到
methods: {
addCart(event) {
if (!event._constructed) {
// 去掉自带click事件的点击
return;
}
if (!this.food.count) {
<font color="red"> Vue.set(this.food, ‘count‘, 1);</font>
} else {
this.food.count++;
}
// event.srcElement.outerHTML
this.$emit(‘increment‘, event.target); // 子组件通过 $emit触发父组件的方法 increment 还
},
decreaseCart(event) {
if (!event._constructed) {
// 去掉自带click事件的点击
return;
}
this.food.count--;
}
}
};9 为减号按钮添加平移、滚动的动画
<transition name="fade"> //减号和数字平移动画
<div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart($event)">
<transition name="inner"> //数字滚动动画
<span class="inner iconfont icon-jian"></span>
</transition>
</div>
</transition>&.fade-enter-active, &.fade-leave-active {
transition: all 0.4s linear <--过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线-->
}
&.fade-enter, &.fade-leave-active {
opacity: 0
transform translate3d(24px, 0, 0) //这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px
}
.inner
display inline-block <--设置成inline-block才有高度，才能有动画-->
line-height 24px
font-size 24px
vertical-align top
color rgb(0, 160, 220, 0.2)
&.inner-enter-active, &.inner-leave-active {
transition: all 0.4s linear
transform: rotate(0)
}
&.inner-enter, &.inner-leave-active {
opacity: 0
transform rotate(180deg)
}10 购物小球（抛物线小球）
滚动小球的实现，只需要考虑enter效果即可,用emit和on派发和监听事件，cartcontrol.vue派发事件{this.$emit('cart-add', event.target)};，goods.vue监听事件cart-add，并添加监听函数cartAdd<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol>，在监听函数cartAdd中拿到shopcart的DOM对象 this.$refs.shopcart.drop(target);，返回shopcart.vue编写drop()获取下落小球的初始位置，并实现beforeEnter，enter和afterEnter方法，设置动画。
- 在shopcart中定义小球，ball-container中存放小球，小球的状态存放在一个数组中，初始状态都是隐藏的
data() {
return {
balls: [{ //每一个成员都用来维护当前小球的状态,初始状态都是隐藏的
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}],
//添加一个变量，用来存贮已经下落的小球
dropBalls: [],
fold: true //购物车详情列表默认折叠
};
}<div class="ball-container">
<div v-for="ball in balls" :key="ball.id">
<transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-show="ball.show" class="ball">
<div class="inner inner-hook"> </div>
</div>
</transition>
</div>
</div>- 为小球添加样式,ball位于购物车图片的上方.ball position:fix z-index:200并设置缓动函数： transition 。
设置inner,inner代表内层的一个小球，并设置缓动函数 - 此处没有设置enter和leave的动画，是因为要动态计算cartcontrol中加号的位置（即起始点宽高的位置，left或者是top的值），首先要拿到cartcontrol中加号这个元素。因为在cartcontrol点击加号会出发事件，我们可以在cartcontral中添加一个派发事件，将它的DOM对象传出来，即在点击事件中添加分发事件
addCart(event) {this.$emit('cart-add', event.target)};
methods: {
addCart(event) {
//解决PC端双点击的问题
if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
return;
}
//console.log('click');//点击不生效，不要忘了在foodScroll中添加click: true
if (!this.food.count) {
//food.count是原json中不存在的属性，不能直接添加
//this.food.count = 1;
Vue.set(this.food, 'count', 1);//给this.food增加一个count属性，并初始化为1
} else {
this.food.count++;
}
//设置滚动对象时，点击加号，设置一个派发事件，将DOM对象传出去,将target（DOM）作为cart.add事件的对象传入
//$emit, $on, $off 分别来分发、监听、取消监听事件：
this.$emit('cart-add', event.target);
},
decreaseCart(event) {
//解决PC端双点击的问题
if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
return;
}
if (this.food.count) {
this.food.count--;
}
}
}
};- 之后在父组件goods中对cart-add进行监听并添加处理事件cartAdd（传入target），
<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol>，cartAdd函数添加在methods中
<div class="cartcontrol-wrapper">
<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol> <!-- 传入food!!!-->
</div>cartAdd(target) {
//拿到traget(DOM对象)之后，将其传入shopcart组件中drop(target){}方法，
//此处用this.$refs调用子组件,访问DOM时用的是ref="menuWrapper"
this.$nextTick(() => { //回调函数异步执行，两个动画效果就不会卡顿了
this.$refs.shopcart.drop(target);
});
}goods父组件访问子组件shopcart的方法，不要忘了添加ref
<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>- 此处回到shopcart.vue编写drop(el){}方法，drop方法对应name=”drop”的transition，并实现1）中的beforeEnter，enter和afterEnter方法，并在css中添加transition
data() {
return {
//添加一个变量，用来存贮已经下落的小球
dropBalls: [],
fold: true //购物车详情列表默认折叠
};
}methods: {
drop(el) {
//console.log(el); //验证是否能正确输出
//遍历balls，拿到第一个show为false的球，做一个动画
for (let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if (!ball.show) { //show为false的球
ball.show = true; //小球下落
ball.el = el;//保留当前的DOM对象，用来计算位置
this.dropBalls.push(ball); //dropBalls存的是已经下落的小球,后续要对已经下落的小球进行处理
return;
}
}
},
//定义三个钩子函数实现动画
beforeEnter(el) { //el为当前执行transition动画的DOM对象
//先找到所有为true的小球（连续点击的情况）
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) { //这个是要运动的小球true
let rect = ball.el.getBoundingClientRect();//获得元素相当于视口的位置
let x = rect.left - 32; //相对位置
let y = -(window.innerHeight - rect.top - 22);
el.style.display = ''; //v-show默认display：none，设置为空，让它显示
//外层元素是纵向的动画，内层元素是横向的动画
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
inner.style.transform = `translate3d(${x}px, 0, 0)`;
}
}
},
enter(el) {
/* 触发浏览器重绘，重绘之后才可以设置transform*/
/* eslint-disable no-unused-vars */ //必须添加声明 否则会报错
let rf = el.offsetHeight;
this.$nextTick(() => { //样式重置
el.style.webKitTransform = 'translate3d(0,0,0)';//没有变量时只能用单引，不能用反引
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
});
},
afterEnter(el) { //动画完成
let ball = this.dropBalls.shift();//删除并返回第一个ball
if (ball) {
ball.show = false; //重置ball.show的状态
el.style.display = 'none';
}
},
}CSS：在运动的时候拉一个贝塞尔曲线，更加贴合实际效果
.ball-container
.ball
position： fixed //相对于视口做布局
left： 32px
bottom： 22px
z-index： 200
transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41) //贝塞尔曲线
.inner
width：16px
height： 16px
border-radius： 50%
background： rgb(0,160,220)
transition all： 0.4s linear //x轴做一个线性的过渡即可11 购物车详情页面的实现
在购物车中有商品时，点击购物车会出现购物车详情，会有一个购物车列表，商品右侧有加减号组件，右上方有清空组件，购物车详情页有固定高度，超过固定高度时就会滚动，不满足固定高度时，只能被自己的高度撑开
首先，在shopcart.vue中添加购物车详情页的DOM结构，v-show控制购物车的展示和收起状态，listShow默认为false，购物车主要分为两块，list-header（购物车标题+清空字块）和购物车商品的详情列表list-content，遍历的是selectFoods，li分为左右两侧，左侧为商品名称和价格，右侧为加减号组件。
在shopcart中添加实现样式
<transition name="fade">
<div class="shopcart-list" v-show="listShow">
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>
<div class="list-content" ref="listContent">
<ul>
<li class="food" v-for="food in selectFoods" :key="food.id">
<span class="name">{{food.name}}</span>
<div class="price">
<span>￥{{food.price * food.count}}</span>
</div>
<div class="cartcontrol-wrapper">
<!-- 记得将cartcontrol组件import到shopcart中，并注册components-->
<cartcontrol :food = "food"></cartcontrol>
</div>
</li>
</ul>
</div>
</div>
</transition>cartcontrol组件引用 import 引入，在components中注册，就可以使用,在shopcart-list中设置了v-show=”listShow”，v-show默认display：none，所以此时看不到购物车列表的变化，可以在点击cartcontrol组件的加减号时观察动态HTML的变化以确认是否实现li列表的呈现
<div class="shopcart-list"v-show="listShow">计算属性listShow，取决于totalCount或者是totalPrice是否大于0
定义变量fold:true来确定详情列表是展开还是折叠的状态，默认为折叠状态
data() {
return {
//添加一个变量，用来存贮已经下落的小球
dropBalls: [],
fold: true //定义收起和展开状态，购物车详情列表默认折叠
};
} listShow() {
// 没有商品时为折叠状态
if (!this.totalCount) {
this.fold = true;// true时为折叠状态
return false; //不做切换
}
// 有商品的时候以变量show做状态切换
let show = !this.fold; // fold为true则show为false，fold为false，则show为true
return show;
}
}- 然后给contentbang绑定一个详情界面：点击cartcontrol（页面下方购物车）就可以来回切换详情表的展开和折叠
<div class="content" @click="toggleList"> <!-- 详情界面-->
toggleList() {
if (!this.totalCount) { //购物车没有商品的时候不可点击
return;
}
this.fold = !this.fold; //当前是收起状态就展开，展开状态就收起
}- 编写购物车详情列表的样式，以便查看效果
.shopcart-list
position absolute
top 0
left 0
z-index -1
width 100%
transform translate3d(0, -100%, 0) //整个列表相对于当前自身的高度做一个偏移
&.fade-enter-active, &.fade-leave-active
transition: all 0.5s linear
transform translate3d(0, -100%, 0) //每个表项相对于当前自身的高度做一个偏移
&.fade-enter, &.fade-leave-active
transform translate3d(0, 0, 0)
.list-header
height 40px
line-height 40px
padding 0 18px
background #f3f5f7
border-bottom 1px solid rgba(7, 17, 27, 0.1)
.title
float left
font-size 14px
color rgb(7,17,27)
.empty
float right
font-size 12px
color rgb(0,160,220)
.list-content
padding 0 18px
max-height 217px
overflow hidden
background #ffffff
.food
position relative
padding 12px 0
box-sizing border-box
border-1px(rgba(7,17,27,0.1))
.name
line-height 24px
font-size 14px
color rgb(7,17,27)
.price
position absolute
right 90px
bottom 12px
line-height 24px
font-size 14px
font-weight 700
color rgb(240, 20, 20)
.cartcontrol-wrapper
position absolute
right 0
bottom 6px@toggleList定义在购物车组件中，点击购物车，通过改变fold的true和false状态，控制购物车详情界面的展开或者折叠；listShow将fold的状态传回给shoplist的v-show，通过v-show来决定购物车详情的展开或折叠，同时listShow还设置没有商品时是不可展开的（ this.fold = true）。
-
-
列表生成，还有几个问题没有解决，首先，购物车详情列表和主页面之间有一个半透明的背景色没有实现，还有就是清空按钮没有实现，加减号组件没有实现点击。
- 首先看加减号不能点击的原因，我们是在betterScroll派发一个事件的时候进行的点击，所以需要betterScroll跟购物车列表相关联，当视口超过固定宽度时进行滚动
首先，引入betterScroll，
import BScroll from 'better-scroll';并在listShow中进行初始化，之后在列表展示的时候才需要给列表做初始化
listShow() {
// 没有商品时为折叠状态
if (!this.totalCount) {
this.fold = true;// true时为折叠状态
return false; //不做切换
}
// 有商品的时候以变量show做状态切换
// fold为true(折叠)则show为false(折叠)，fold为false(展开)，则show为true(展开);
// 这样，show就跟v-show的true和false状态同步了，变为true时展开，false时折叠
let show = !this.fold;
if (show) { // true为展示状态
this.$nextTick(() => {
if (!this.scroll) { // 没有scroll的时候才需要new，否则只需要刷新一下即可
this.scroll = new BScroll(this.$refs.listContent, {
click: true
});
} else {
this.scroll.refresh();
}
});
}
return show;
}
}之后我们点击的时候，betterScroll就会自动派发一个事件，实现点击和动画
- 实现click清空事件
<div class="list-header">
<h1 class="title">购物车</h1>
<span class="empty" @click="empty">清空</span>
</div>将selectFoods中的food.count设为0即可
empty() {
this.selectFoods.forEach((food) => { //遍历food，将food的count都置零
food.count = 0;
});
}- 还要添加一个背景，半透明模糊是相对于整个 屏幕 做定位的，所以要和shopCart 平级
<transition name="fade">
<!-- listShow表示当list详情列表显示的时候mask才显示 -->
<div class="list-mask" v-show="listShow" @click="hideList()"></div>
</transition>写样式:相对于窗口固定布局，宽高都是100%，设定z-index要小于shopcart的z-index，之后添加缓动
.list-mask
position fixed
top 0
left 0
width 100%
height 100%
z-index 40 //z-index要小于shopcart的index
backdrop-filter blur(10px) // 模糊效果
-webkit-backdrop-filter blur(10px)
opacity 1
background rgba(7, 17, 27, 0.6)
&.fade-enter-active, &.fade-leave-active
opacity 1
transition: all 0.5s //设置缓动效果
background rgba(7, 17, 27, 0.6)
&.fade-enter, &.fade-leave-active
opacity 0
background rgba(7, 17, 27, 0)点击背景的时候也可以收起列表，添加hideList()方法
hideList() {
this.fold = true; //点击mark层，购物车详情列表被收回
}- 做点击结算：click pay函数
<!-- 点击去结算,结算过后因为事件冒泡的原因（pay按钮是content详情界面的子节点），详情列表会被展开，用stop.prevent阻止事件冒泡-->
<div class="content-right" @click.stop.prevent="pay">
<div class="pay" :class="payClass"> <!-- 在这里做一个状态的判断-->
{{payDesc}}
</div>
</div>
pay() { //点击去结算
if (this.totalPrice < this.minPrice) {
return;
}
window.alert(`支付￥${this.totalPrice}元`);
//window.alert('支付' + this.totalPrice + '元');
}点击结算按钮，购物车详情页被展开是因为事件的冒泡缘故，所以要阻止冒泡—–content-right冒泡到content上的缘故，导致content出现了切换购物车详情页的情况
<div class="content" @click="toggleList">
<div class="content-right" @click.stop.prevent="pay">