2018.11.27 慕课网vuejs音乐app开发第二天

在使用mint-ui播放轮播图效果的时候，用vw来设置高度单位，这样就能自适应窗体的大小了

.mint-swipe {

height: 40vw;

}

当我们的项目的代码量很多的时候，我们可以分为基础组件，还有逻辑组件，api接口，公共组建等一些列的目录，方便我们以后的维护

导入样式和js的代码：

@import "~common/stylus/variable" //样式

import {getRecommend,getDiscList} from 'api/recommend' //导入js代码

当我们组件里面使用了setTimeout的时候我们在最后面要进行清理：使用destroyed钩子函数来进行清理:养成好的编程习惯，有利于内存释放：

destroyed() {
    clearTimeout(this.timer)
}

vue.config.js里面配置别名，说过很多次了，一定要注意啊

const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
module.exports = {
    //配置别名就是到时候要访问这个目录下的东西直接写common 上面的1-3行代码 要记得写
    chainWebpack: (config) => {
        // 添加别名
        config.resolve.alias
          .set('common', resolve('src/common'))
          .set('api', resolve('src/api'))
          .set('base', resolve('src/base'))
          .set('components', resolve('src/components'))
    }
  }

歌单组件数据的抓取有另外一个博客写着

关于懒加载技术的实现： vue-lazyload

1.首先先进行安装： "vue-lazyload": "^1.2.6",

2.然后在main.js里面进行全局的引入，代码如下

//导入懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{//第三方插件都要去使用
    //这张图片就是懒加载时候的图片
  loading: require('common/images/default.png')
})

3.最后在相应要懒加载的地方把相应的src改成v-lazy="item.imgurl"

关于better-scroll的封装使用：

1.先把外层的盒子定死在设置里面的盒子撑开外面的盒子

.recommend
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .recommend-content
      height: 100%
      overflow: hidden

2.封装better-scroll方法

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

<script>
  import BScroll from 'better-scroll'
  export default {
    props: {
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      listenScroll: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: null
      },
      pullup: {
        type: Boolean,
        default: false
      },
      beforeScroll: {
        type: Boolean,
        default: false
      },
      refreshDelay: {
        type: Number,
        default: 20
      }
    },
    mounted() {
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })
        //到这里scroll的初始化就截止了
        //下面是配置一些代理
        if (this.listenScroll) {
          let me = this
          this.scroll.on('scroll', (pos) => {
            me.$emit('scroll', pos)
          })
        }

        if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        }

        if (this.beforeScroll) {
          this.scroll.on('beforeScrollStart', () => {
            this.$emit('beforeScroll')
          })
        }
      },

      //配置一些代理
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {
        //如果scroll是有的 就去调用enable
        this.scroll && this.scroll.enable()
      },
      //自动刷新scroll列表 重新计算列表的高度
      refresh() {
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }
    },
    watch: {
      data() {
        setTimeout(() => {
          this.refresh()
        }, this.refreshDelay)
      }
    }
  }
</script>

<style scoped lang="stylus">

</style>
<!--封装better-scroll-->

3.最后用scroll来包裹就好了

<scroll  class="recommend-content" :data="SongList"> 
            <!--这个是封装好的better-scroll 
        使用：data="SongList"来进行监听是否改变 调用refersh刷新列表页面-->
            <slider :recommends="recommends"></slider>
            <div class="recommend-list">
                
                <h1 class="list-title">热门歌单推荐</h1>
                <ul>
                    <li  v-for="item of SongList" class="item" :key="item.id">
                        <div class="icon">
                            <img v-lazy="item.imgurl" width="60" height="60">
                        </div>
                        <div class="text">
                            <h2 class="name" >{{item.creator.name}}</h2>
                            <p class="desc">{{item.dissname}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        
            <div class="loading-container" v-show="!SongList.length">
                <loading></loading>
            </div> <!--数据没有的时候进行显示 没有的时候进行隐藏-->
</scroll>

注意在需要fastclick不能制止的默认行为可以这样书写 class="needsclick"

关于加载等待的效果显示：loading

1.首先先定义这个组件

<template>
  <div class="loading">
    <img width="24" height="24" src="./loading.gif">
    <p class="desc">{{title}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '正在载入请稍等...'
      }
    }
  }
</script>
<style scoped lang="stylus">
  @import "../../common/stylus/variable"

  .loading
    width: 100%
    text-align: center
    .desc
      line-height: 20px
      font-size: $font-size-small
      color: $color-text-l
</style>

2.然后在相应的组件注册即可

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


.loading-container
        position: absolute
        width: 100%

2018.11.27 慕课网vuejs音乐app开发 第二天