let { index } = qs.parse(location.search.substr(1)); changeNav(list, index) { //this.curIndex = index; location.href = `${list.href}?index=${index}`; //页面跳转 event.preventDefault(); }
三、商品搜索列表页
商品搜索列表页同样的基本操作与首页和目录分类页类似，这里唯一不同的是，商品搜索列表页在用户下拉一定距离后，会出现一个回到顶部的图标，点击图标，用户就可以直接回到顶部，在这里，我们使用了一个叫作Velocity.js的动画库，它是把css中的一些动画效果进行封装，进而可以通过一些api轻松实现一些简单的动画效果，例如上面所说的回到顶部，在项目中的代码片段如下所示：
//引入Velocity import Velocity from 'velocity-animate/velocity.js' //在methods中加入对应方法 methods:{ scrollMove(){ if (window.scrollY>=290){ this.isShow=true } else { this.isShow=false } }, goToTop(){ Velocity(document.body, 'scroll', { duration: 500, easing: "easeOutQuart" }); this.isShow=false //回到顶部图标消失 } }
四、商品详情页
在商品详情页中，除了有对数据的获取和页面的渲染外，这里主要涉及到了三个新的操作：
sku算法的应用
页面的载入和消失的动画效果
页面展示时的穿透滚动问题的解决
首先是sku算法，由于此次商品详情页的选择并不需要使用到它，因为商品的可选属性只有一个，但是在实际情况下，由于很多商品的可选属性不止一个，因此是需要使用到sku算法的。SKU=Stock Keeping Unit(库存量单位)，同一型号的产品，或者说是同一个产品项目（产品条形码是针对企业的产品）。
然后如何制作sku页面载入和消失时的动画效果呢？这里我们使用到了vue提供的自带transition的封装组件，可以通过这个组件来给任何元素和组件添加进入或者离开时的过渡。这个组件提供了八个JavaScript钩子函数以及六个过渡类名的切换，利用这些钩子函数以及类名的切换就可以完成组件的过渡动画了，这里列举一个vue文档上的典型例子给大家参考一下吧：
transition过渡：
<div> <button v-on:click="show = !show"> Toggle </button> <transition> <p v-if="show">hello</p> </transition> </div>
new Vue({ el: '#demo', data: { show: true } })
.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
最后在遮罩层和弹出层出现之后（即sku页面），对页面进行上下拖动时，背后的内容层也会跟着一起拖动，这是典型的滚动穿透问题，在这里我的解决办法是监听遮罩层和弹出层的出现，当它们出现之后，我们更改内容层的样式，使其样式变为：position:fixed;width:100%;这样内容层就不会再滚动了，之后我们再通过设置：
scrollTop = document.scrollingElement.scrollTop document.body.style.top = -scrollTop + 'px'
使得内容层的滚动高度与遮罩层和弹出层出现前相同，并且，调整html元素的样式：height:100%;overflow:hidden;，在关闭遮罩层和弹出层后，还原这些修改样式，即可使得滚动穿透的问题得以解决。需要注意的是，还原这些样式之后，原本内容层滚动的高度就会丢失，因此我们要通过之前记录下来内容层滚动的高度，在还原样式时将滚动高度也一并还原。
document.scrollingElement.scrollTop = scrollTop
这样滚动穿透的问题就算是彻底解决了，下面是全部的这部分的全部代码片段：
chooseSku(type) {//显示购买菜单 this.skuType = type this.showModal = true }, changeSku(num) {//增减数量 if (num < 0 && this.skuNum === 1) return this.skuNum += num }, addCart() {//加入购物车 $.ajax($.url.cartAdd, { id, skuNum: this.skuNum }).then((data) => { if (data.status === 200) { this.showModal = false this.showAddMsg = true //添加成功的信息 this.isAddedCart = true //显示购物车图标 setTimeout(() => this.showAddMsg = false, 1200) } }) } },
watch:{ showSku(val,oldVal){ if (val){ scrollTop = document.scrollingElement.scrollTop document.body.style.top = -scrollTop + 'px' } document.body.style.position=val?'fixed':'static' // document.body.style.margin=val?`0 0 ${window.scrollY}px 0`:'0px' document.querySelector('html').style.overflow=val?'hidden':'auto' document.body.style.width=val?'100%':'auto' document.querySelector('html').style.height=val?'100%':'auto' if (!val){ document.scrollingElement.scrollTop = scrollTop } } }
层级规范：用于规范WeUI页面元素所属层级、层级顺序及组合规范。
五、购物车页面
购物车页面里面比较多的逻辑关系，在此就不一一枚举了，大概说一下它的重构思路：
商品的获取渲染以及增加是否被选中属性
获取后台数据加载处理或动态响应式处理
商品选中店铺选中全选，影响价格三级联动。
编辑状态，其余不可切换。对数量操作，加减更改。删除，单商品删除，选中(多个)删除，商品删除店铺删除。
原生事件，滑动删除页面，Volecity。
删除多个商品进行过滤处理
fetch层封装，
同一个场景下思维层封装
问题呈现，左滑删除样式继承。[0].style.left='0px' this.$refs[`goods-${shopIndex}-${goodIndex}`][0].style.left='0px'
ref 是非响应式的，不建议在模板中进行数据绑定，即使用唯一标识绑定
v-for 模式使用“就地复用”策略，简单理解就是会复用原有的dom结构，尽量减少dom重排来提高性能 ( 解决方案：还原dom样式 )
key 为每个节点提供身份标识，数据改变时会重排，最好绑定唯一标识，如果用index标识可能得不到想要的效果(绑定唯一识别key)
网页性能管理详解
首先获取数据，渲染到页面这些是基本的操作