Vue2音乐播放器分析

App.vue

和常规一样只包含#app标签，再加上渲染命令router-view,但是这里增加了底部导航栏 NavBottomView, css格式文件为index.css。需要注意的是启用了watch属性来坚挺路由的变化，并通过路由变化来设置底部导航栏是否显示。

watch: {
      $route(to,from){
        if(to.path.indexOf('detail')!==-1){
          this.$store.dispatch('hideNav');
          console.log(to.path.indexOf('detail'),"-----");
        }else{
          this.$store.dispatch('showNav');
          console.log(to.path.indexOf('detail'),"==========");
        }
        if(to.path === '/cart' || to.path === '/search' || to.path === '/login' || to.path === '/register'){
          this.$store.dispatch('hideNav');
        }
      }
    },

main.js

导入 vue-router,axios, router.config,lazyload等，加载全局css 文件。

分类主页面

目前只有一级分类，考虑到流行电商App都不搞成树状菜单，所以考虑把支持2级分类，第一级分类在左边以菜单栏方式显示，2级分类显示在右边，如果再点击右边的二级分类项目，会直接搜出该二级分类下的产品列表。

第1章到第三章：完成商城骨架的搭建。

使用命令添加如下插件

npm install fastclick --save

dependency:
bable-runtime
fastclick：无延时300毫秒插件
dev-dependency:

类型样式插件：stylus，stylus-loader

babel-polyfill

第4章：

4.1 Jsonp解决跨域问题

4.2 解决vue2.9.2版本没有dev-server.js问题

第5章 歌手列表页

5.4 Listview基于Scroll组件实现，在此组件基础上增加data属性并由外部传入，然后在Listview组件中加入v-for循环把Title和列表渲染出来即可。在Singer.vue里直接导入Listview组件并传入data数据即可；其次列表图片的懒加载，直接在Listview组件的img更改为v-lazy即可解决图片懒加载。

5.5 右侧快速入口。1、计算属性定义shortcutList得到title首字母为元素的数组。2、添加事件，首先点击事件，

 <div class="list-shortcut" @touchstart.stop.prevent="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove"
         @touchend.stop>

在Scroll里增加：ScrollTo和ScrollToElement方法。

    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }

在Listview

onShortcutTouchStart(e) {
      let anchorIndex = getData(e.target, 'index')
      let firstTouch = e.touches[0]
      this.touch.y1 = firstTouch.pageY
      this.touch.anchorIndex = anchorIndex

      this._scrollTo(anchorIndex)
    },

3、滑动支持：

onShortcutTouchMove(e) {
      let firstTouch = e.touches[0]
      this.touch.y2 = firstTouch.pageY
      let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0
      let anchorIndex = parseInt(this.touch.anchorIndex) + delta

      this._scrollTo(anchorIndex)
    },

4. 高亮显示字母

在Scroll增加一个Props来控制是否要监听滚动事件：

listenScroll: {
  type: Boolean,
  default: false
 },

在_intiScroll方法里增加一段代码来得到列表滚动到的位置

if (this.listenScroll) {
   let me = this
   this.scroll.on('scroll', (pos) => {
   me.$emit('scroll', pos)
   })
}

这样就可以在外面监听得到scroll事件.

<scroll @scroll="scroll"
        :listen-scroll="listenScroll"
        :probe-type="probeType"
        :data="data"
        class="listview"
        ref="listview">

添加一个scroll方法

scroll(pos) {
  this.scrollY = pos.y
},

增加一个高度计算方法

先增加一个Watch

watch: {
  data() {
    setTimeout(() => {
      this._calculateHeight()
    }, 20)
  },

方法

_calculateHeight() {
  this.listHeight = []
  const list = this.$refs.listGroup
  let height = 0
  this.listHeight.push(height)
  for (let i = 0; i < list.length; i++) {
    let item = list[i]
    height += item.clientHeight
    this.listHeight.push(height)
  }
},

在观察事件里，增加如下代码

watch: {
  data() {
    setTimeout(() => {
      this._calculateHeight()
    }, 20)
  },
  scrollY(newY) {
    const listHeight = this.listHeight
    // 当滚动到顶部，newY>0
    if (newY > 0) {
      this.currentIndex = 0
      return
    }
    // 在中间部分滚动
    for (let i = 0; i < listHeight.length - 1; i++) {
      let height1 = listHeight[i]
      let height2 = listHeight[i + 1]
      if (-newY >= height1 && -newY &l