标签：封装 detail 商品 点击 组件 coderwhy 梳理 商城 图片

四.写详情页

在首页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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。