# dep-cms

**Repository Path**: wzxtarget/dep-cms

## Basic Information

- **Project Name**: dep-cms
- **Description**: 1.webpack+vue+ui框架功能展示(vant框架,better-scroll左右联动,购物车功能)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 这是项目说明文档  

### 第二种用vs code编辑器（可视化操作）  

### 步骤  
  >> 1.先在命令行中cnpm i安装依赖，然后npm run dev启动服务（webpack.config.js中配置自动打包）  
  >> 2.安装vant。  cnpm i vant -S  
  >> 3.导入vant中的组件（三种：按需、手动、全部，看vant文档）,  
     按需导入要在.babelrc中配置plugin，并且cnpm i babel-plugin-import -D  
     全部导入则不要在.babelrc中配置plugin，有冲突

### App.vue中tabbar开启路由使用vant框架中tabber的路由模式  

### App.vue中tabbar在页面刷新后高亮复位的问题  
  >> App.vue中tabbar在页面刷新的时候active(van-tabbar-item的索引)会清零，导致tabbar在  
  >> 点击后刷新页面后tabbar选项跳回首页并高亮，但路由还在原来点击的页面。所以，为了保证  
  >> 最后点击时的active不会丢失，将它用sessionStorage保存,并且重写tabbar高亮事件。 

### sideBar.vue中侧边栏及内容滚动用better-scroll滚动插件 
  >> 分类数据用static文件中的category.json,用axios请求。且static文件夹要放在根目录下  
  >> 注意每次更换模拟请求数据网址
  >> 要刷新一次滚动，手机正常，可能是浏览器调试工具差异问题
### sideBar.vue中mui滚动组件手指离开后惯性滚动高度为undefine的问题(踩坑过程)
  >> mui滚动scroll插件中一个页面有两个class="mui-scroll-wrapper"时选择器要分别标记  
  >> 这里为scrollTop = mui(".cate-right .mui-scroll-wrapper").scroll().y  
  >> 因为在mui滚动插件中，监听不到手指滑动离开后惯性滚动时的实时scrollTop，所以用jq实现滚动行为。 
  >> 左侧分类用mui滚动组件，右侧内容用css实现滚动（overflow:scroll）,出现左侧点击跳转与右侧滚动高度冲突问题。 
  >> 最终，用better-scroll实现滚动，能实时监听内容滚动的高度pos.y。 

### cart.vue使用vant框架的van-checkbox，SubmitBar提交订单栏组件展示页面按钮
  >> 购物车功能实现了店铺全选，单选。商品全选，单选。实时计算价格。删除商品等功能