# shopingmall

**Repository Path**: lqt99/shopingmall

## Basic Information

- **Project Name**: shopingmall
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-29
- **Last Updated**: 2021-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# shopingmall

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

###问题描述：
####1.在首页以及详情页对商品使用better-scroll进行展示时，时而出现无法向下滚动的情况。
  由于better-scroll会根据滚动内容计算要滚动的高度，
  在页面打开时，网络请求的数据还未渲染到页面上，图片未加载完成，导致计算出来的高度有误，因而无法滚动。
  解决办法：
  当图片加载完成时，gooditems组件发出的 imageload 事件，home监听其发出的事件，
    使用better-scroll内置的refresh函数，对滚动区域刷新，重新计算高度。
  为了防止刷新函数的多次调用，使用防抖操作对refresh进行包装，有效的减少函数的刷新次数
####2.首页吸顶效果实现方法
####3.非父子组件通信，需要通过 事件总线 来传递事件
  Vue.prototype.$bus = new Vue()
  this.$bus.$emit('事件名称',参数)
  this.$bus.$on('事件名称',callback)
####4.通过使用keep-alive保持了首页的状态，并在其activated(),deactivated()函数中保持并恢复了浏览滚动位置，
  但是假如我们切换到详情页面，当我们监听详情页面的图片加载完成事件时，也会导致触发了首页的图片加载完成事件。
    因此需要当首页deactivated时，关闭首页的图片加载监听