vue项目仿蘑菇街步骤详解(三)-购物车开发、补充FastClick,lazyLoad,px2vw

一、导航栏实现-Vuex知识点

navbar

• cartLength可以直接在computed里面写，如果引用的地方多的话就可以写在getter里面
  

• 普通引用getter与使用computed代码量差不多，这里使用mapGetters辅助函数直接混入

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

二、购物车商品列表展示

• CartList引入scroll
• 复制粘帖源码CartListItem.vue,
  
  
• 重点：CheckBotton.vue
  -
  
  

三、item选中与不选中的切换

• 记录选中状态不能在属性里面，一定是在对象模型cartList[商品1,商品2]里面记录
  
  
  
  

• 关于修改props的值，却能修改state的问题
  

四、底部工具的封装和使用

<template>
  <div class="bottom-bar">
    <div class="check-content">
      <CheckButton class="check-button"></CheckButton>
      <span>全选</span>
    </div>
    <div class="price">合计 : {{ totalPrice }}</div>
    <div class="calculate">去计算 ( {{ checkLength }} )</div>
  </div>
</template>

<script>
import CheckButton from "components/common/checkButton/CheckButton";

import { mapGetters } from "vuex";
export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },
  computed: {
    ...mapGetters(["cartList"]),
    totalPrice() {
      return (
        "￥" +
        this.cartList
          .filter((item) => {
            return item.checked;
          })
          .reduce((preValue, item) => {
            return preValue + item.price * item.count;
          }, 0)
          .toFixed(2)
      );
    },
    checkLength() {
      return this.cartList.filter((item) => item.checked).length;
    },
  },
};
</script>

<style scoped>
.bottom-bar {
  display: flex;
  height: 40px;
  background-color: #eee;
  position: relative;
  line-height: 40px;
  font-size: 14px;
}
.check-content {
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 60px;
}
.check-button {
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
}
.price {
  margin-left: 20px;
  flex: 1;
}
.calculate {
  width: 90px;
  color: #fff;
  background-color: red;
  text-align: center;
}
</style>

五、全选按钮的状态显示

六、全选按钮的点击效果

七、Vuex-actions返回Promise-mapActions

• 弹出Toast不是直接在addCart后面添加代码，而是要进行回调
• actions返回Promise普通写法
  
  
• 使用mapActions映射
  
  

八、Toast封装-普通方式封装

• CartBottomBar.vue如果也需要使用Toast，会比较麻烦

九、Toast封装-插件方式

• Toast.vue

<template>
  <div class="toast">
    <div v-show="isShow">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Toast",
  data() {
    return {
      message: "",
      isShow: false,
    };
  },
  methods: {
    show(message='默认文字', duration=2000) {
      this.isShow = true;
      this.message = message;
      setTimeout(() => {
        this.isShow = false;
        this.message = "";
      }, duration);
    },
  },
};
</script>

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;

  color: #fff;
  background-color: rgba(0, 0, 0, 0.75);

  z-index: 999;
}
</style>

• toast文件夹新建index.js
  
  
• Toast封装完成，直接使用，不需要引入
  
  

十、fastclick-解决移动端300ms延迟

• 安装
  npm install fastclick --save
• 导入，使用
  

十一、图片懒加载-vue-lazyload框架

• 安装
  npm install vue-lazyload --save
• 导入使用
  
  
• 使用占位图片
  

十二、px2vw - css单位转化插件

• 安装
  npm install postcss-px-to-viewport --save-dev
• 配置postcss.config.js，如果没有这个文件，自行创建

module.exports = {
  plugins: {
    autoprefixer: {},
	  "postcss-px-to-viewport": {
		  viewportWidth: 375,  // 视窗的宽度，对应的是我们设计稿的宽度.
		  viewportHeight: 667, // 视窗的高度，对应的是我们设计稿的高度.(也可以不配置)
		  unitPrecision: 5, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
		  viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
		  selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'], // 指定不需要转换的类,后面再讲.
		  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
		  mediaQuery: false, // 允许在媒体查询中转换`px`
		  exclude:[/TabBar/] // 必须是正则，匹配文件的

	  },
  }
}