前天完成了一个新组件的开发，做的过程也是各种遇到问题，彻底弄懂了slot，巩固了一些flex布局和jquery的知识，比起自己第一次做组件开发，现在已经是能够下手做，遇到问题解决问题，还算有进步。
但是昨天写博客的时候，就在我快写完的时候，chrome崩溃了。。。我也崩溃了。。。写的东西全没有了！！！我还是继续重新码字吧。。。崩溃。。。
做的这个组件给它起个什么名字比较合理我想了半天也没想出来。。。
需求是这样的：
- 由两部分组成，上面是导航条，下面每一块显示内容。如下图。
- 导航条固定在顶部
- 点击导航里的每一个标签，该标签高亮，该标签相应的div自动跳到内容部分第一栏的位置（这里最后一栏无法跳到第一栏，因为要撑开整个页面）
- 滑动下面的内容，滑到哪个div对应的navs的标签高亮
核心代码写在下面～供参考哦
html插入nav-list模板：
<div id="main">
<nav-list :navs="navs" :contents="contents">
<div v-for="con in contents" :class="'con_' + con.en_name" :slot="'con_' + con.en_name">{{ con.text }}</div> // :class要写在这里，而不要写在<slot>上
</nav-list>
</div>
子组件模板：
这里重点是如何使用slot，并且如何将navs的每一个标签和下面的div对应联系起来！
<template>
<div class="navList">
<div class="nav">
<div v-for="nav in navs" v-bind:class="{ active: cur == nav.en_name }" v-on:click="changeNav(nav.en_name)">{{ nav.name }}</div>
</div>
<div class="list">
<slot v-for="nav in navs" :name="'con_' + nav.en_name"></slot>
</div>
</div>
</template>
子模板的操作代码：
return{
props: {
navs: {
type: Array
, default: function(){
return {}
}
}
, contents: {
type: Array
, default: function(){
return {}
}
}
}
, data: function(){
return {
cur: this.navs[0].en_name // 可以在data中这样定义初始值， 这里是将cur的初始值设定为navs的第一个en_name值
}
}
, methods: {
changeNav: function(index){ // 点击任意标签，调用该事件，改变其相应div的位置，即使整个页面向上滑动一定的距离。
this.cur = index
var pos = $(".con_" + index).position().top
var pos2 = $('.navList').position().top // 这个是整个组件距离页面顶端的距离。
$(window).scrollTop(pos+pos2)
}
, scroll: function(){ // scroll()这个事件是div滑动停止时触发的，事件内部定义了：如何确定是哪个div在第一个显示位置，从而找到相应的navs的标签
var _this = this
$(window).on('scrollStop', function(event) {
for( attr in _this.navs ){
var curPos = $(".con_" + _this.navs[attr].en_name).offset().top
var curPos2 = curPos + $(".con_" + _this.navs[attr].en_name).height()
if( curPos <= $(window).scrollTop() + $(".nav").height() && $(window).scrollTop() + $(".nav").height() <= curPos2){
_this.cur = _this.navs[attr].en_name
}else if($(window).scrollTop() < $('.navList').offset().top){
_this.cur = _this.navs[0].en_name
}
}
})
}
}
, mounted: function(){
this.scroll()
this.$nextTick(function(){
$('.nav').sticky({ // 这个也是直接写好的置于顶部的组件，我也是直接将它用在nav上
infinity: true
})
})
}
}
以上是所有vue组件代码，下面创建一个父实例的js文件：
var sticky = require('core/m/sticky_vue')
var vm = new Vue({
el: "#main"
,components: {
navList: require('navList.vue')
}
, data: function(){
return {
navs: [{ name: '美妆', en_name: 'makeup' }
, { name: '时尚', en_name: 'fashion' }
, { name: '鞋履', en_name: 'shoes' }
, { name: '大牌', en_name: 'board'}
, { name: '潮服', en_name: 'clothes'}
]
, contents: [
{ en_name: 'makeup', text: '美妆美妆'}
, { en_name: 'fashion', text: '时尚在哪里时尚在哪里'}
, { en_name: 'shoes', text: '鞋鞋鞋子'}
, { en_name: 'board', text: '大牌驾到'}
, { en_name: 'clothes', text: '服饰！！！'}
]
}
}
})
以上就是所有的代码了～在整个过程中遇到的问题都是基础知识不扎实，还有vue的使用不很流畅。大致有以下几点：
- jQuery的offset().top和position().top区分使用，offsetTop得到的是undefined，$(window).scrollTop()可以获取页面的整个垂直的滚动高度，$(window).scrollTop(值)则是设置滚动高度。在做的过程中，对于div要滚动多少、要获取的是div距页面的高还是句定位父级的高、页面要滚动多少、是否要包含nav的高度等等都是需要考虑的问题，所以这一部分自己还是理解的不到位，所以滚动的高度具体的调节都是通过实验的方式得到的。
- scroll()事件何时触发是我一开始不太明白的，比如changeNav(){}我定义在methods中，然后使用v-on:click="changeNav()"调用即可，那么scroll()这类事件应该放在哪里触发呢？在vue中我们将这些事件定义在methods中，然后在mounted或是created中调用即可！
