四.写详情页

在首页GooListItem里设置了点击跳转 这和路由的设置相呼应

 1.NavaBar

用以前封装好的模板 左边插槽添加图片 并且设置点击返回

中间插槽flex布局 利用currentindex=index实现活跃 

2.Detail轮播图 和商品信息 商家信息 商品参数 仍然是先获取数据 network detail.js里配置 然后再Detail.vue里created()里获取

detail.js里封装构造函数 这里面的this指向调用者 所以goods shop goodsparams 数据都有了  commentInfo 用户评论也有了 detailimg是轮播图的图片 也有了 子组件里写样式就好了

recommend是detail页下拉到最后要推荐的商品

 （1）商品参数有很多图片 加载的时候需要@load 然后refresh一下

（2）评论里需要用到时间格式转换的方法封装到utils里 将数字转化成千，万结尾的方法封装到playCount里

（3）商品推荐用封装好的组件 传递一个参数就行

（4）底部TabBar有一个加入购物车功能  点击之后先把商品信息保存到一个对象里 然后在store里mutations和actions配合 将商品加入state里的cartlist[] 这里涉及到弹窗问题 写个公共组件 message upshow可传 

 

 3.顶部状态切换 点击滑到对应位置 先给每个用得到的组件设置ref 然后计算出offsetTop 传道数组里 最后一个传入最大值 方便判断

 dnavbarclick：凭借从navbar传过来的index每次都能滑倒对应位置 scrollTo是scroll封装的对象

contentscroll：scroll传过来的方法 开头三行是判断backTop的 后面的是便利有高度的数组 如果大于前者小于后者 说明已经划过 要切换状态栏的状态 把i传递 

 

 返回顶部按钮 结合上面代码 这个出现的判断条件任意

 细节：当shop里的图片加载完再计算offsetTop

标签：封装,detail,商品,点击,组件,coderwhy,梳理,商城,图片
来源： https://blog.csdn.net/jingkai0714/article/details/120250731