Vue.js制作移动端音乐播放器项目心得

使用better-scroll制作轮播图组件

使用better-scroll实现一个可以上下拖动的组件

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'scroll',
  props: {
    // 控制组件监听滚动事件缓慢拖动时监听到还是快速拖动
    probeType: {
      type: Number,
      default: 1
    },
    // 是否手动派发点击事件
    click: {
      type: Boolean,
      default: true
    },
    // 组建的数据，有可能动态变化的
    data: {
      type: Array,
      default: null
    }
  },
  methods: {
    _initScroll() {
      if (!this.$refs.wrapper) {
        return;
      }
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click
      })
    },
    enable() {
      // enable()启用 better-scroll
      this.scroll && this.scroll.enable()
    },
    disable() {
      // disable()  禁用 better-scroll
      this.scroll && this.scroll.disable()
    },
    refresh() {
      // 刷新scroll 重新计算高度
      this.scroll && this.scroll.refresh()
    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh()
      }, 20)
    }
  },
  mounted() {
    // mounted之后，还要确保dom已经渲染
    setTimeout(() => {
      this._initScroll()
    }, 20)
  }
}
</script>

<style scoped>

</style>

组件代码如上。
在调用时，传入data参数，可以为需要滚动部分的数据，这样可以保证在收到数据后，watch到data变化，调用refresh()方法重新计算一下需要上下滑动的距离。

better-scroll组件使用的注意点是：一定要在dom树渲染完毕后再调用组件，此时计算的高度或宽度才正确。

为了保证能在DOM树渲染后才调用，用了以下方法：

1. 组件的mounted()里才调用初始化函数。
2. 调用该组件的组件中，如果有需要img加载完毕才能撑开高度的DOM节点，可以给这个img加一个load事件，在图片加载完毕之后调用一次refresh()方法/

 <img @load="loadImage" :src="item.picUrl">

loadImage() {
      if (!this.checkLoaded) {
        /*
         *
         *技巧！！！设置一个标志位，确保逻辑只执行一次。!!!!!!
          */
        this.$refs.scroll.refresh();
        this.checkLoaded = true;
      }
    }

3. 传入data数据，监听data变化，data一旦变化调用一次refresh()方法。

vue.js中实现图片懒加载

插件Vue-LazyLoad(https://github.com/hilongjw/vue-lazyload)
载入插件老样子，
先安装：

$ npm install vue-lazyload -D

-save和save-dev可以省掉你手动修改package.json文件的步骤。
spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
-S就是--save的简写
-D就是--save-dev
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

安装完毕后在main.js引入,use两部曲

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  loading: require('common/image/laozizhenshicaole.jpg')
});

Constructor Options

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	src of the image upon load fail	'data-src'	String
loading	src of the image while loading	'data-src'	String
attempt	attempts count	3	Number
listenEvents	events that you want vue listen for	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	dynamically modify the attribute of element	{ }	Element Adapter
filter	the image's listener filter	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	trigger the dom event	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver
silent	do not print debug info	true	Boolean

调用时只要：

<img :src="item.imgurl" width="60" height="60"/>

替换为

<img v-lazy="item.imgurl" width="60" height="60"/>

即可

使用fastclick组件解决移动端click事件300ms延迟的问题

先来看怎么用？

import fastclick from 'fastclick'
fastclick.attach(document.body)

原生js中怎么用？

安装

npm install fastclick -S

//先引入
<scriptsrc='/path/to/fastclick.js'></script>
//脚本必须加载到实例化fastclick在页面的任何元素之前。
//实例化 fastclick 最好在body元素的前面，这是使用推荐的方法：
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

//jquery中可以：
$(function() {
    FastClick.attach(document.body);
});

click事件为什么有延迟?

“...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.”

大概意思就是：从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。

兼容性

• Mobile Safari on iOS 3 and upwards
• Chrome on iOS 5 and upwards
• Chrome on Android (ICS)
• Opera Mobile 11.5 and upwards
• Android Browser since Android 2
• PlayBook OS 1 and upwards

什么时候不用它?

astclick不附加任何监听器在桌面浏览器上面，所以如果你的项目不是针对的移动浏览器，那么就不要使用这个插件。
Android 设备上的 google浏览器 （Chrome） 32+ 版本，在meta头信息中设置width=device-width 没有300毫秒的延时，所以也无需使用本插件。
<meta name="viewport" content="width=device-width, initial-scale=1">
Chrome浏览器在安卓设备上的时候，设置meta头信息中 user-scalable=no 但是这样就无法让用户多点触控缩放网页了。
对于IE11 + 你可以设置 touch-action: manipulation; 来禁用通过双击放大某些元素例如：链接和按钮的，对于IE10使用 -ms-touch-action: manipulation 。

better-scroll和fastclick冲突

轮播图点击有时会出现点击不转向链接的情况，我们在上下滚动的better-scroll中，click配置成了true，是可以点击的。这个click为true是必须要的。
fastclick有些默认行为，我们最终点击的是img标签，给img加一个class="needsclick"，可以告诉fastclick这个元素是需要被点击的

loading组件展示加载中的状态

import Loading from '../../base/loading/loading.vue'

<div  class="loading-container" v-show="!discList.length">
        <loading></loading>
</div>

.loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)