sell-shopcart

2018-10-16 本文已影响0人焦迈奇

1.price部分垂直居中为啥要采取

line-height: 24px
margin-top: 12px

而不采取
line-height: 48px
原因：因为右边有一个border-right,如果采取第二种则会让线长至整个高度

seller传入deliveryPrice和minPrice时，是通过app的router-view传入seller给goods组件，goods组件再传给shopcart,通过props传入。
那么为啥之前没有通过router-view导入seller，goods组建任然可以使用seller数据，但不能由goods传给其他组件呢？
当字符串为单纯字符串，不含变量时需要将``反协号改为单引号。
重绘与重排

image.png

最佳实践

避免在document上直接进行频繁的DOM操作, 如果确实需要可以采用off-document方式进行;
集中修改样式
缓存layout属性值
设置position为absolute或者fixed
权衡动画速度和CPU性能
不要使用table布局
不要在css中写expression

浏览器执行流程

浏览器每次从服务器下载完页面后就会对页面进行渲染(Render), 这里面就包含了重绘以及重排。每种浏览器虽然工作原理略有差别, 但也遵循以下流程:浏览器引擎会解析HTML文档来构建DOM树。树的每个节点都是标签, 有大小边距等等的属性, 这是因为每个HTML元素都遵循盒子模型(隐藏元素不包括在文档树中, 浏览器不会将其渲染)。渲染树构建完毕后, 浏览器就能够确定每个元素的位置并将元素放到正确的位置上, 再根据树节点的样式属性绘制出页面元素.(由于浏览器的流布局的方式, 对渲染树的计算通常只需要遍历一遍即可。)但table及其内部元素除外, 可能需要执行多次计算才能确定好在渲染树中的属性, 这个过程通常要耗费3倍以上的时间。这也是我们要避免使用table标签的其中一个原因。

document.getBoundingClientRect
6.Unexpected side effect in "listShow" computed property
报错代码
istShow() {
if (!this.totalCount) {
this.fold = true;
return false;
}
let show = !this.fold;
return show;
}
}
因为这样是只读的，要更改，就报错了，想更改，就要用get和set方法

listShow: {
  get: function () {
    return this.fold
  },
  set: function () {
    if (!this.totalCount) {
      this.fold = true
      return false
    }
    let show = !this.fold
    return show
  }
}

这时当前的俩个this.fold将不会报错，但是后面引入better-scroll的时候，点击cartcontrol任然没有效果，原因：get返回的值是this.fold，所以在只有this.fold值改变的时候才会调用set函数，所以当你this.fold值为true后在点击其他的均不会调用set函数(这个是get,和set机制的原因,get和set是在listShow()的方法,只有在读取listShow属性值时使用get方法,而在修改listShow的属性值的时候才会调用set方法,而我们只是修改了对应的fold的值来实现效果,所以set并起不到作用,所以不用set和get方法来实现,)，所以点击也就不起效果了。

所以最终写法是,在

listShow() {
      // 没有商品时为折叠状态
      if (!this.totalCount) {
        // eslint-disable-next-line
        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，否则只需要刷新一下即可
            // eslint-disable-next-line
            this.scroll = new BScroll(this.$refs.listContent, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      }
      return show;
    }
  }
**忽略俩条的eslint检查了**`// eslint-disabled-next-line`

translatea3d(0,-100%,0)表示高度auto
当点击pay时会事件冒泡，展开list列表所以要阻止事件冒泡@click.stop.event="pay"
三者联动起来的原理：cartcontrol提供this.$dispath监听cart.add,得到当前点击事件的元素，goods通过监听到事件调用私有方法并传入target,在私有方法中传target调用子组件shopcart的私有方法drop来传target给子元素。
在vue的父组件怎么访问子组件的方法，vue提供接口ref,通过dom来获取对应的方法，this.$refs.shopcart.drop(target);。
cartcontrol点击加号没有效果，因为cartcontrol在foodsScroll面板中，由better-scroll插件实现的滚动默认点击是失效的，需要初始化开启，需要设置foodsScroll的初始click为true。
当点击时this.food.count是应该变化的，但在页面并没有显示，vue.js特性：当我们给一个观测对象添加一个它不存在的字段时非法的，它的defineProperty检测不到属性新增的变化，需要使用Vue.set接口给它新增接口并赋值。

sell-shopcart

最佳实践

浏览器执行流程

猜你喜欢

热点阅读