前面的一到五都会慢慢补上去的

最近一直在看基于vue.js 2.0的总结,学到了很多,却都没有记下来(心痛,好伐)。被人推荐了markdown编辑器,来简书试试手感。

写在前面 vue的prop,data里面的数据都是响应式的,所以在你初始化数据的时候,一定要先想好是否要让他可以变化!

这两天在写musicList和singerDetail组件的开发,先讲讲这几节课的重点把。

1：路由配置与dom

首先需要配置子路由,路由是由组件承载的

重点:路由和组件都是树状结构,而singerDetail是singer组件下的子路由,结构如图所示。

image.png

但是有了子路由还不够,需要有个router-view来渲染它,把router-view写在singer组件里面,要注意,其实这时候并没有跳转到其他页面,只是在router-view渲染了组件,然后这个组件高度宽度100%,zIndex很高,覆盖住了原来的组件

（keep-alive标签保证router在切换的时候不会重复加载）

image.png

listview是之前开发的组件,歌手信息都在其中,所以当你点击歌手信息要跳转的时候,由listview的点击事件发送一个自定义事件给父组件singer,父组件使用this.$router.push()跳转

listview点击事件

listview发送自定义事件给父组件

父组件(singer)接受

父组件使用router-push跳转

不知道为什么我的vue动画就是出不来,所以就跳过了 有没有大佬能够帮帮我(逃)

接下来会涉及到vueX,这个我打算专门写一篇博客来巩固自己。。,现在只要知道vuex用于较大型项目,在组件和组件之间传递数据,大部分是子组件或者路由跳转

2：歌手数据抓取和封装

其实这个没什么好说的,就是课程上讲的接口没用了,我找了好久找到了个现在可以用的,还有##获取数据的时机要在created!!。。重点还是使用 jsonp跨域,这个我也会专门写一篇博客来巩固自己。
当你直接在singerDetail界面刷新的话,让他直接回退到singer路由

回退路由和异步获取数据

歌曲数据如图

song类

image.png

多方便!

构建song类的工厂方法

3:musicList组件的开发

首先,musicList组件是singerDetail组件的子组件,应该实现的效果如下图所示,所以应该传入三个数据给musicList的props,分别是bgImg,songs,title。这三个属性都可以在之前的singerDetail组件里获取的musicData中获取,所以这不算难点。
musicList组件里还有一个子组件(base组件,大部分地方都会用到)Songlist,往songList里面传入歌曲数组,会自动遍历出每首歌。

image

css

vue中绑定style可以如图所示

image.png

image.png

接下来,通过对设计稿的观察,我们发现歌曲列表这个组件一直被复用,所以我们把它独立出来,所以接下来我们就要开始写songList组件,它较为简单,只需要注意他的样式,我只放一张图

songList组件

写完了songList组件,在musicList中注册一下,然后再用之前写过的scroll组件包裹

image.png

对各个浏览器来讲,背景图的高度是不一样的,

image

image.png

在写完上面的musiclist之后,我们基本上算是完成了,但是需要进行优化!

4: musicList组件的优化----上滑的时候要让上面的图片也上滑一段距离

怎么实现呢? 让bglayer跟scroll层一样也往上运动,但是zindex比bgimg高,这样效果就是遮盖住了bgimg.这样就可以做到当你上滑list的时候,图片被遮挡住的效果.,dom结构 css如下

dom

css

实现方案:

1. songList滚动的时候派发一个滚动事件,父组件scroll接受到这个事件获取偏移量pos.y

image.png

image.png

image.png

最小高度

final

对了,还有一个!我觉得挺重要的

5:在js中,针对各个浏览器内核的不同而自动帮你补全前缀

通过浏览器的能力检测进行

/* 对js里面css的前缀补全的操作 */
let elementStyle = document.createElement('div').style
/* 创建一个元素,检查这个浏览器都支持什么类型 */
/* 进行能力检测 */

/* 这个一个立即执行函数!! */
/* 立即执行函数: 即在函数表达式后面直接加() 如同function aaa(){xxx}()这样的函数在定义后会立即调用
 * 后面()里面的参数作为函数参数使用
 * 由于js中没有私有作用域,用这种方法可以起到私有作用域的方法,防止变量被污染 */
let vender = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    if(elementStyle[transformNames[key]] !== undefined){
      return key
    }
  }

  return false
})()

export function prefixStyle(style) {
  if (vender === false) {
    return false
  }
  if (vender === 'standard') {
    return style
  }
  /* 如果输入transform 则会输出webkitTransform ransform是substring出来的 */
  return vender + style.charAt(0).toUpperCase() +style.substring(1)
}