上次用uniapp加uview简简单单实现了一个图书商城，由于只是学习uniapp的一个练手的东西，所以存在许多不足，就连数据参数都穿错了，所以，现在用vue2加vant又重新做了同样的图书商城，并且把之前的问题进行了解决，gitee地址vue2+vant图书商城,登陆账号为:test@a.com,密码：123123

自定义NavBar,主要运用到了vue的props和$emit(父子通讯)

注册界面，没啥的，主要是校验，组件本身已经做了校验，也可以自定义，不过要注意，判断两次密码输入是否一致时不能用 this.xxx,必须用 @submit绑定的funcrion的参数，如下图的value

 

 

首页，下拉刷新，上拉加载，并且对Tab做了优化,上划tab会固定到top，这里也对其做了一层封装，只需传入对用的tab值数组即可,商品显示也是封装了一个goods-card组件，在商品详情里也会用到

 

 

商品详情，这里就用到了之前封装好的tab和goods-card组件，点击推荐商品列表可以套娃，不过有个待解决的问题是点击返回只能回到首页(该问题已解决，详情看我另一篇)

 

 

这个分类没啥了，在uniapp和微信小程序都有scroll-view,h5就只能自己写样式了 

主要是通过overflow-y:scroll，但是必须给高度，那就height: calc(100vh - 90px);,减去NavBar和底部TabBar的高度即可,注意，减号前后必须加空格。

购物车，左滑可删除，地址加载默认地址，若无默认地址则显示选择地址

 收货地址管理，这里选择即默认了

 

收货地址新建

点击修改地址信息，可回显，可以更新删除地址信息

 

订单预览，可提交订单，后台会返回订单详情，但是支付接口404了

 

 

问题解决:

1.底部导航栏刷新页面会跑问题，通过$router进行判断，即可刷新保留位置

2.有些页面需要进行登陆操作，通过前置路由守卫进行判断，

3.页面切换位置不会到顶部问题:后置路由守卫window.scrollTo(0,0)