项目开发（5）-CSDN博客

本文链接：https://blog.csdn.net/Rashu99/article/details/115803699

详情页导航栏和内容对应

点击导航栏滚动到对应的位置

之前在DetailGoodsInfo里监听图片加载完成后发射事件 imageLoad 出去
然后在Detail监听这个事件

topY是放这四个内容的offsetTop值
在这里插入图片描述
$ el 是获取组件中的元素
注释掉的$ nextTick 原本是放在created下是等Dom渲染完再执行但是由于DetailGoodsInfo里需要加载很多图片所以获取到的值不准确

同理如果把红框代码放在mounted里去获取值为undefined 因为先在created请求数据而且还是异步请求然后在mounted里拿$el 很大可能还没渲染好
在updated里能拿到值但不一定正确但是会打印很多次很频繁
所以放在图片加载完再获取offsetTop
在这里插入图片描述
这也就能打印正确的offsetTop值了

接着点击导航栏跳转到对应的部分
就需要先在监听点击事件

之前detailNavBar里有点击事件而且传过来index

在这里插入图片描述

直接使用scrollTo 注意是负值 200为滚动时间
在这里插入图片描述

接着滚动内容导航栏自动切换

在这里插入图片描述
先定义positionY 为 - position.y

//for in 遍历对象 0 1 2 3
//for of 对值遍历 y值

然后 let i 从 0 到 3 遍历
这里length-1 是因为 push进了一个最大值这也滚到推荐信息时好比较和后一个的值在这里插入图片描述
currentIndex 是为了少打印
如果当前是商品信息则index 还是 0
然后接着滚动比较当前位置和topY里记录的参数的offsetTop值
当超过这个值又小于下一个top值也就是当前界面为参数信息就把i = currentIndex
同时赋值给 detailNavBar 中的currentIndex 也就切换了导航栏
在这里插入图片描述

底部栏

精灵图

在这里插入图片描述
回到顶部和home里一样
所以可以抽取到mixin.js里
导入BackTop

不能抽取方法里的某一句只能是整个方法

点击加入购物车获取商品信息
在这里插入图片描述

图片就使用topImage里的第一张
标题价格等这些信息都保存在goods里
还要获取iid

store 就是vuex 用来保存状态这里要先去npm install vuex
在这里插入图片描述

mutations 存在的目的就是修改state中的状态
方法最好单一方便追踪 mutations里state

应该放在actions里注意actions里是context上下文
在这里插入图片描述

最好是在store文件夹下新建mutations、actions 然后导入
在这里插入图片描述

为了代码更规范以后好管理
可以新建一个mutation-type.js
在这里插入图片描述

这样以后如果需要改名称就只需要在type里改一下就好了

代码重构：
1、本来在mutations里做的操作，分出来在actions
2、把这些又分出来到新的文件里

mapGetters 辅助函数 可以把store里的getter映射到计算属性
从vuex里导入mapGetters

想改名字用对象不改名字用数组
在这里插入图片描述
getter

cartList.vue
cartListItem.vue
在cart里有nav-bar 、cart-list
在这里插入图片描述
length就使用computed里的
样式

购物车

cart
在这里插入图片描述

在cartListItem里
在这里插入图片描述
监听CheckButton组件修改itemInfo在mutations中定义的checked属性（默认为true) 而不是直接修改isCheck，要修改对象模型（商品itemInfo）的属性

点击图标发射checkBtnClick 事件
在这里插入图片描述
在购物车界面商品左侧的按钮默认是选中 :class="{'selector-active': isChecked}" 背景颜色变粉

点击不选中或者选中通过checkedChange改变商品的checked属性父传子通过props传递数据子组件随即更新状态selector-active 为true 即为选中状态
在这里插入图片描述

item-info 是cartList组件里从cartList数组（mapGetters获取的）取出item赋值给item-info 传值给子组件cartListItem 是为了div显示商品信息的
scroll > div > cartListItem
在这里插入图片描述

对商品的操作是放在actions里的addCart方法从Detail获取商品添加到addCart
因为是actions 所以使用dispatch 如果是mutations就是commit
这里使用的变量名就是cartListItem里显示的itemInfo.image
this.$store.dispatch('addCart',product)

cartListItem style
在这里插入图片描述

cartBottomBar

监听CheckButton 点击
在这里插入图片描述
计算总价使用filter 选出选中的商品再使用reduce 累计价格再使用toFixed保留两位小数点

计算总共几样商品使用filter 选出选中的商品长度

如果未加购商品则按钮为false
遍历商品如果有未选中返回false 反之true

这是点击商品左侧的按钮来判断底部的全选按钮选中还是不选中
在这里插入图片描述
反过来如果点击底部的全选按钮让商品左侧的按钮全选还是全不选

如果全选按钮是true 则forEach遍历商品让其全选反之为false
在这里插入图片描述
未加购商品时使用自己封装的插件 toast “弹出” 提示（在下文）

actions可以返回promise
这样点击加入购物车可以知道是数量+1 还是添加了新的商品
在这里插入图片描述

这里可以用mapActions 和mapGetters 类似
不过这里是actions映射到methods ...mapActions(['addCart'])
就可以直接this.addCart 调用了

toast

显示添加购物车成功的弹窗
不需要像注释那样写用两个变量和定时器来显示

只需要写个toast插件
在这里插入图片描述

在main.js里导入toast
在这里插入图片描述
使用Vue.use() 默认会执行 .install 函数默认参数vue

在这里插入图片描述

创建组件构造器 Vue.extend(Toast)
new 一个组件对象
挂载到某个元素上
用$ el 加入到body

Toast.vue
在这里插入图片描述
定时器一到就消失

减少移动端点击延迟
fastclick

npm install fastclick --save
import FastClick from ‘fastclick’
FastClick.attach(document.body)

图片懒加载
图片需要显示时才加载

npm install vue-lazyload --save
import VueLazyLoad from ‘vue-lazyload’
Vue.use(VueLazyLoad)
:src 换成 v-lazy

过一会才加载出来
在这里插入图片描述

px-to-viewport 移动端适配
npm install postcss-px-to-viewport --save-dev

module.exports = {
  plugins:{
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 375, // UI设计稿的宽度(750)
      viewportHeight:667, // 设计稿的高度（可以不配置）
      unitPrecision: 5, // px转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap",'ignore','tab-bar','tab-bar-item'], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
  }

  }
}