项目：Vue.js高仿饿了吗外卖APP（二）

青旅半醒 2022-05-18 09:59 318阅读 0赞

【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.采用绝对定位，相对于父元素

  1. .good
  2.   display： flex
  3.   position： absolute
  4.   width： 100%
  5.   top： 174px
  6.   bottom： 46px
  7.   overflow： hidden

3.使用vue-resourse获取json并应用到模板

现在越来越多的数据传输方式都是json数据格式，包括用jquery开发时，也有很好用的$.ajax来进行数据请求与处理，那么vue-resource提供了一种类似的，并且api更加简洁易用，压缩后文件更小。配合ES 6的Lambda写法，更加优雅
官网：https://github.com/pagekit/vue-resource/blob/master/docs/http.md

  1. props: {
  2.       seller: {
  3.         type: Object
  4.       }
  5.     },
  6.     data () {
  7.       return {
  8.         goods: [],  //一开始goods为空
  9.         listHeight: [],
  10.         scrolly: 0,
  11.         selectedFood: {}
  12.       };
  13.     },
  14.     created() {   //当这个组件被调用的时候，通过后端获得数据赋值给goods
  15.       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.遍历取数据

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

  1. <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 元素; 如果用在子组件上，引用就指向组件实例:

  1. _initScroll(){
  2.       //初始化scroll区域
  3.         this.menuScroll = new BScroll(this.$refs.menuWrapper, {
  4.           click: true //结合BScroll的接口使用,是否将click事件传递,默认被拦截了
  5.         });
  6.         this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
  7.           probeType: 3 //结合BScroll的接口使用,3实时派发scroll事件，探针的作用
  8.         });
  9.         //结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标，当滚动时能实时暴露出scroll
  10.         this.foodsScroll.on(‘scroll‘, (pos) => { //事件的回调函数
  11.           this.scrollY = Math.abs(Math.round(pos.y));//滚动坐标会出现负的,并且是小数,所以需要处理一下，实时取得scrollY
  12.   }) }

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()方法计算各个右侧区间的高度

  1. _calculateHeight(){
  2.         let foodList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘); //获取每一个food的dom对象
  3.         let height = 0;
  4.         this.listHeight.push(height); //初始化第一个高度为0
  5.         for (let i = 0; i < foodList.length; i++) {
  6.           let item = foodList[i]; //每一个item都是刚才获取的food的每一个dom
  7.           height += item.clientHeight; //主要是为了获取每一个foods内部块的高度
  8.           this.listHeight.push(height);
  9.         }
  10.       }
  11.     }

实时取得scrollY的值后，需要与左边进行映射，利用计算属性：

  1. **computed: {
  2.       currentIndex(){ //计算到达哪个区域的区间的时候的对应的索引值
  3.         for (let i = 0; i < this.listHeight.length; i++) {
  4.           let height1 = this.listHeight[i]; //当前menu子块的高度
  5.           let height2 = this.listHeight[i + 1]; //下一个menu子块的高度
  6.           //滚动到底部的时候,height2为undefined,需要考虑这种情况
  7.           //需要确定是在两个menu子块的高度区间
  8.           if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
  9.             return i; //返回这个menu子块的索引
  10.           }
  11.         }
  12.         return 0;
  13.       },
  14.       selectFoods() { //自动将所有的goods.food添加一个count属性,方便做数量运算
  15.         let foods = [];
  16.         this.goods.forEach((good) => {
  17.           good.foods.forEach((food) => {
  18.             if (food.count) {
  19.               foods.push(food);
  20.             }
  21.           });
  22.         });
  23.         return foods;
  24.       }
  25.     }**

:class=”{‘current‘:currentIndex === index}”当currentIndex === index时才设置current这个class

点击左侧 ，右侧响应：

关于在selectMenu中点击,在pc界面会出现两次事件,在移动端就只出现一次事件的问题:

原因:bsScrooler会监听事件(例如touchmove,click之类),并且阻止默认事件(prevent stop),并且他只会监听移动端的,pc端的没有监听

在pc页面上 bsScroller也派发了一次click事件,原生也派发了一次click事件

  1. //bsScroll的事件,有_constructed: true
  2. MouseEvent {isTrusted: false, _constructed: true, screenX: 0, screenY: 0, clientX: 0…}
  3. //pc的事件
  4. MouseEvent {isTrusted: true, screenX: -1867, screenY: 520, clientX: 53, clientY: 400…}

解决:针对bsScroole的事件,有_constructed: true,所以做处理,return掉非bsScroll的事件

  1. selectMenu(index, event){
  2.         if (!event._constructed) { //去掉自带的click事件点击，即pc端直接返回
  3.           return;
  4.         }
  5.         let foodsList = this.$refs.foodsWrapper.getElementsByClassName(‘food-list-hook‘);
  6.         let el = foodsList[index];
  7.         //类似jump to的功能,通过这个方法,跳转到指定的dom
  8.         this.foodsScroll.scrollToElement(el, 300);
  9.       },

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%，形成一个圆

选择了多少商品：定义成数组，底栏其余部分的变化都基于这个对象的变化而变化

  1. selectFoods: {
  2.         type: Array,
  3.         default() { 
  4.           return [{price: 20, count: 2}];
  5.         }
  6.       }

计算部分（都基于selectFoods进行相应计算）computed中的函数可以直接在Tempplate中以指针的形式引用

  1. computed: {
  2.       totalPrice() {//计算总价，超过起送额度后提示可付款
  3.         let total = 0;
  4.         this.selectFoods.forEach((food) => {
  5.           total += food.price * food.count;
  6.         });
  7.         return total;
  8.       },
  10. totalCount() {//计算选中的food数量，在购物车图标处显示，采用绝对定位，top：0；right：0；显示在购物车图标右上角
  11.     let count = 0;
  12.     this.selectFoods.forEach((food) => {
  13.       count += food.count;
  14.     });
  15.     return count;
  16.   }

控制底部右边内容随food的变化而变化，payDesc()控制显示内容，payClass()添加类调整显示样式

  1. 在template中 <div class="pay" :class="payClass"> { { payDesc}} </div>
  3. 在computed中：
  4. payDesc() {
  5.         if (this.totalPrice === 0) {
  6.           return `￥${ this.minPrice}元起送`; //这里使用的是es6中的反引号
  7.         } else if (this.totalPrice < this.minPrice) {
  8.           let diff = this.minPrice - this.totalPrice;
  9.           return `还差￥${diff}元起送`;
  10.         } else {
  11.           return ‘去结算‘;                 //单引号，单引号和反引号不同
  12.         }
  13.       },
  14.       payClass() {
  15.         if (this.totalPrice < this.minPrice) {
  16.           return ‘not-enough‘;
  17.         } else {
  18.           return ‘enough‘;
  19.         }
  20.       }

总结：通过以上学习我们能发现，selectFoods()的变化起着关键作用，它的变化会引起DOM的变化，并最终体现到界面上，而我们不用关注DOM内部的具体实现，这就是vue的一大好处。如果采用jQuery完成这些功能会略显繁杂。

8 cartcontrol组件，它是shopcart的子组件

可以给按钮增加padding，方便用户点击

  1. this.foodScroll = new BScroll(this.$refs.foodWrapper, {
  2.           probeType: 3,
  3.           click: true
  4.         });

click: true 是否派发click事件

通过import Vue from ‘vue‘;使用set接口，通过vue.set()添加属性，当它变化时就能被检测到

  1. methods: {
  2.       addCart(event) {
  3.         if (!event._constructed) {
  4.           // 去掉自带click事件的点击
  5.           return;
  6.         }
  7.         if (!this.food.count) {
  8.          <font color="red"> Vue.set(this.food, ‘count‘, 1);</font>
  9.         } else {
  10.           this.food.count++;
  11.         }
  12. // event.srcElement.outerHTML
  13.         this.$emit(‘increment‘, event.target); // 子组件通过 $emit触发父组件的方法 increment 还
  14.       },
  15.       decreaseCart(event) {
  16.         if (!event._constructed) {
  17.           // 去掉自带click事件的点击
  18.           return;
  19.         }
  20.         this.food.count--;
  21.       }
  22.     }
  23.   };

9 为减号按钮添加平移、滚动的动画

  1. 　<transition name="fade">   //减号和数字平移动画
  2.         <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart($event)">
  3.           <transition name="inner">    //数字滚动动画
  4.           <span class="inner iconfont icon-jian"></span>
  5.           </transition>
  6.         </div>
  7.     </transition>
  9. &.fade-enter-active, &.fade-leave-active {
  10.       transition: all 0.4s linear    <--过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线-->
  11.     }
  12.     &.fade-enter, &.fade-leave-active {
  13.       opacity: 0
  14.       transform translate3d(24px, 0, 0) //这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px
  15.     }
  16.     .inner
  17.       display inline-block <--设置成inline-block才有高度，才能有动画-->
  18.       line-height 24px
  19.       font-size 24px
  20.       vertical-align top
  21.       color rgb(0, 160, 220, 0.2)
  22.       &.inner-enter-active, &.inner-leave-active {
  23.         transition: all 0.4s linear
  24.         transform: rotate(0)
  25.       }
  26.       &.inner-enter, &.inner-leave-active {
  27.         opacity: 0
  28.         transform  rotate(180deg)
  29.       }

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() {

    1.         return {
    2.             balls: [{ //每一个成员都用来维护当前小球的状态,初始状态都是隐藏的
    3.                 show: false
    4.             },
    5.             { 
    6.                 show: false
    7.             },
    8.             {  
    9.                 show: false
    10.             },
    11.             {  
    12.                 show: false
    13.             },
    14.             {  
    15.                 show: false
    16.             }],
    17.             //添加一个变量，用来存贮已经下落的小球
    18.             dropBalls: [],
    19.             fold: true //购物车详情列表默认折叠
    20.         };
    21. }








  • 为小球添加样式,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: {

    1.     addCart(event) { 
    2.         //解决PC端双点击的问题
    3.         if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
    4.             return;
    5.         }
    6.         //console.log('click');//点击不生效，不要忘了在foodScroll中添加click: true 
    7.         if (!this.food.count) {
    8.              //food.count是原json中不存在的属性，不能直接添加
    9.             //this.food.count = 1;
    10.             Vue.set(this.food, 'count', 1);//给this.food增加一个count属性，并初始化为1
    11.         } else {
    12.             this.food.count++;
    13.         }

    //设置滚动对象时，点击加号，设置一个派发事件，将DOM对象传出去,将target（DOM）作为cart.add事件的对象传入
    //$emit, $on, $off 分别来分发、监听、取消监听事件：

    1.         this.$emit('cart-add', event.target);
    2.     },
    3.     decreaseCart(event) {
    4.         //解决PC端双点击的问题
    5.         if (!event._constructed) { //浏览器直接return掉,去掉自带click事件的点击
    6.             return;
    7.         }
    8.         if (this.food.count) {
    9.             this.food.count--;
    10.         }
    11.     }
    12. }

    };

  • 之后在父组件goods中对cart-add进行监听并添加处理事件cartAdd（传入target），<cartcontrol v-on:cart-add="cartAdd" :food="food"></cartcontrol>，cartAdd函数添加在methods中



    cartAdd(target) {

    1.  //拿到traget(DOM对象)之后，将其传入shopcart组件中drop(target){}方法，
    2.  //此处用this.$refs调用子组件,访问DOM时用的是ref="menuWrapper"
    3. this.$nextTick(() => { //回调函数异步执行，两个动画效果就不会卡顿了 this.$refs.shopcart.drop(target); }); }

goods父组件访问子组件shopcart的方法，不要忘了添加ref

  1. <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 {

    1. //添加一个变量，用来存贮已经下落的小球
    2. dropBalls: [],
    3. fold: true //购物车详情列表默认折叠

    };
    }

    methods: {

    1. drop(el) {
    2.    //console.log(el); //验证是否能正确输出
    3.    //遍历balls，拿到第一个show为false的球，做一个动画
    4.    for (let i = 0; i < this.balls.length; i++) {
    5.       let ball = this.balls[i];
    6.       if (!ball.show) { //show为false的球
    7.           ball.show = true; //小球下落
    8.           ball.el = el;//保留当前的DOM对象，用来计算位置
    9.           this.dropBalls.push(ball); //dropBalls存的是已经下落的小球,后续要对已经下落的小球进行处理
    10.           return;
    11.        }
    12.   }

    },
    //定义三个钩子函数实现动画
    beforeEnter(el) { //el为当前执行transition动画的DOM对象

    1. //先找到所有为true的小球（连续点击的情况）
    2. let count = this.balls.length;
    3. while (count--) {
    4.   let ball = this.balls[count];
    5.   if (ball.show) { //这个是要运动的小球true
    6.      let rect = ball.el.getBoundingClientRect();//获得元素相当于视口的位置
    7.      let x = rect.left - 32;    //相对位置
    8.      let y = -(window.innerHeight - rect.top - 22);
    9.      el.style.display = ''; //v-show默认display：none，设置为空，让它显示
    10.      //外层元素是纵向的动画，内层元素是横向的动画
    11.      el.style.webkitTransform = `translate3d(0,${y}px,0)`;
    12.      el.style.transform = `translate3d(0,${y}px,0)`;
    13.      let inner = el.getElementsByClassName('inner-hook')[0];
    14.      inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
    15.      inner.style.transform = `translate3d(${x}px, 0, 0)`;
    16.   }

    }
    },
    enter(el) {
    / 触发浏览器重绘，重绘之后才可以设置transform/
    / eslint-disable no-unused-vars / //必须添加声明 否则会报错
    let rf = el.offsetHeight;
    this.$nextTick(() => { //样式重置

    1.  el.style.webKitTransform = 'translate3d(0,0,0)';//没有变量时只能用单引，不能用反引
    2.  el.style.transform = 'translate3d(0,0,0)';
    3.  let inner = el.getElementsByClassName('inner-hook')[0];
    4.  inner.style.webkitTransform = 'translate3d(0,0,0)';
    5.  inner.style.transform = 'translate3d(0,0,0)';

    });
    },
    afterEnter(el) { //动画完成

    1. let ball = this.dropBalls.shift();//删除并返回第一个ball
    2. if (ball) {
    3.     ball.show = false; //重置ball.show的状态
    4.     el.style.display = 'none';
    5.  }
    6. },

    }

CSS：在运动的时候拉一个贝塞尔曲线，更加贴合实际效果

  1. .ball-container
  2.     .ball
  3.        position： fixed //相对于视口做布局
  4.        left： 32px
  5.        bottom： 22px
  6.        z-index： 200
  7.        transition: all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41)   //贝塞尔曲线
  8.        .inner
  9.           width：16px
  10.           height： 16px
  11.           border-radius： 50%
  12.           background： rgb(0,160,220)
  13.           transition all： 0.4s linear  //x轴做一个线性的过渡即可

11 购物车详情页面的实现
在购物车中有商品时，点击购物车会出现购物车详情，会有一个购物车列表，商品右侧有加减号组件，右上方有清空组件，购物车详情页有固定高度，超过固定高度时就会滚动，不满足固定高度时，只能被自己的高度撑开

首先，在shopcart.vue中添加购物车详情页的DOM结构，v-show控制购物车的展示和收起状态，listShow默认为false，购物车主要分为两块，list-header（购物车标题+清空字块）和购物车商品的详情列表list-content，遍历的是selectFoods，li分为左右两侧，左侧为商品名称和价格，右侧为加减号组件。

在shopcart中添加实现样式

  1. <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来确定详情列表是展开还是折叠的状态，默认为折叠状态

  1. data() {
  2.             return {
  3.                 //添加一个变量，用来存贮已经下落的小球
  4.                 dropBalls: [],
  5.                 fold: true //定义收起和展开状态，购物车详情列表默认折叠
  6.             };
  7.         }
  9. listShow() {
  10.                 // 没有商品时为折叠状态
  11.                 if (!this.totalCount) {
  12.                     this.fold = true;// true时为折叠状态
  13.                     return false; //不做切换
  14.                 }
  15.                 // 有商品的时候以变量show做状态切换
  16.                 let show = !this.fold; // fold为true则show为false，fold为false，则show为true
  17.                 return show;
  18.             }
  19.         }

  • 然后给contentbang绑定一个详情界面：点击cartcontrol（页面下方购物车）就可以来回切换详情表的展开和折叠

    1.      toggleList() {
    2.             if (!this.totalCount) { //购物车没有商品的时候不可点击 
    3.                 return;
    4.             }
    5.             this.fold = !this.fold; //当前是收起状态就展开，展开状态就收起
    6.         }

  • 编写购物车详情列表的样式，以便查看效果

    .shopcart-list

    1.         position absolute
    2.         top 0
    3.         left 0
    4.         z-index -1
    5.         width 100%
    6.         transform translate3d(0, -100%, 0) //整个列表相对于当前自身的高度做一个偏移
    7.         &.fade-enter-active, &.fade-leave-active 
    8.             transition: all 0.5s linear 
    9.             transform translate3d(0, -100%, 0) //每个表项相对于当前自身的高度做一个偏移
    10.         &.fade-enter, &.fade-leave-active
    11.             transform translate3d(0, 0, 0)
    12.         .list-header
    13.             height 40px
    14.             line-height 40px
    15.             padding 0 18px
    16.             background #f3f5f7
    17.             border-bottom 1px solid rgba(7, 17, 27, 0.1)
    18.             .title
    19.                 float left
    20.                 font-size 14px
    21.                 color rgb(7,17,27)
    22.             .empty
    23.                 float right
    24.                 font-size 12px
    25.                 color rgb(0,160,220)
    26.         .list-content
    27.             padding 0 18px
    28.             max-height 217px
    29.             overflow hidden
    30.             background  #ffffff
    31.             .food
    32.                 position relative
    33.                 padding 12px 0
    34.                 box-sizing border-box
    35.                 border-1px(rgba(7,17,27,0.1))
    36.                 .name
    37.                     line-height 24px
    38.                     font-size 14px
    39.                     color rgb(7,17,27)
    40.                 .price 
    41.                     position absolute
    42.                     right 90px
    43.                     bottom 12px
    44.                     line-height 24px
    45.                     font-size 14px
    46.                     font-weight 700
    47.                     color rgb(240, 20, 20)
    48.                 .cartcontrol-wrapper
    49.                     position absolute
    50.                     right 0
    51.                     bottom 6px

@toggleList定义在购物车组件中，点击购物车，通过改变fold的true和false状态，控制购物车详情界面的展开或者折叠；listShow将fold的状态传回给shoplist的v-show，通过v-show来决定购物车详情的展开或折叠，同时listShow还设置没有商品时是不可展开的（ this.fold = true）。

  • -

列表生成，还有几个问题没有解决，首先，购物车详情列表和主页面之间有一个半透明的背景色没有实现，还有就是清空按钮没有实现，加减号组件没有实现点击。

  • 首先看加减号不能点击的原因，我们是在betterScroll派发一个事件的时候进行的点击，所以需要betterScroll跟购物车列表相关联，当视口超过固定宽度时进行滚动

首先，引入betterScroll，

  1. import BScroll from 'better-scroll';

并在listShow中进行初始化，之后在列表展示的时候才需要给列表做初始化

  1. listShow() {
  2.     // 没有商品时为折叠状态
  3.    if (!this.totalCount) {
  4.        this.fold = true;// true时为折叠状态
  5.        return false; //不做切换
  6.    }
  7.  // 有商品的时候以变量show做状态切换
  8. // fold为true(折叠)则show为false(折叠)，fold为false(展开)，则show为true(展开);
  9. // 这样，show就跟v-show的true和false状态同步了，变为true时展开，false时折叠
  10.   let show = !this.fold; 
  11.   if (show) { // true为展示状态
  12.      this.$nextTick(() => { if (!this.scroll) { // 没有scroll的时候才需要new，否则只需要刷新一下即可 this.scroll = new BScroll(this.$refs.listContent, { click: true }); } else { this.scroll.refresh(); } }); } return show; } }

之后我们点击的时候，betterScroll就会自动派发一个事件，实现点击和动画

  • 实现click清空事件


    购物车


    清空

将selectFoods中的food.count设为0即可

  1. empty() {
  2.           this.selectFoods.forEach((food) => { //遍历food，将food的count都置零
  3.           food.count = 0;
  4.         });
  5.      }

  • 还要添加一个背景，半透明模糊是相对于整个 屏幕 做定位的，所以要和shopCart 平级

写样式:相对于窗口固定布局，宽高都是100%，设定z-index要小于shopcart的z-index，之后添加缓动

  1. .list-mask
  2.         position fixed 
  3.         top 0
  4.         left 0
  5.         width 100%
  6.         height 100%
  7.         z-index 40 //z-index要小于shopcart的index
  8.         backdrop-filter blur(10px) // 模糊效果
  9.         -webkit-backdrop-filter blur(10px)
  10.         opacity 1
  11.         background rgba(7, 17, 27, 0.6)
  12.         &.fade-enter-active, &.fade-leave-active  
  13.             opacity 1
  14.             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()方法

  1. hideList() { 
  2.      this.fold = true; //点击mark层，购物车详情列表被收回
  3.  }

  • 做点击结算：click pay函数

    { { payDesc}}
    pay() { //点击去结算 if (this.totalPrice < this.minPrice) { return; } window.alert(支付￥${ this.totalPrice}元); //window.alert(‘支付’ + this.totalPrice + ‘元’); }

点击结算按钮，购物车详情页被展开是因为事件的冒泡缘故，所以要阻止冒泡—–content-right冒泡到content上的缘故，导致content出现了切换购物车详情页的情况

  1. <div class="content" @click="toggleList">
  2.  <div class="content-right" @click.stop.prevent="pay">

发表评论

表情：
评论列表 （有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读