基於vue的新組件開發

前天完成了一個新組件的開發，作的過程也是各類遇到問題，完全弄懂了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的使用不很流暢。大體有如下幾點：

1. jQuery的offset().top和position().top區分使用，offsetTop獲得的是undefined，$(window).scrollTop()能夠獲取頁面的整個垂直的滾動高度，$(window).scrollTop(值)則是設置滾動高度。在作的過程當中，對於div要滾動多少、要獲取的是div距頁面的高仍是句定位父級的高、頁面要滾動多少、是否要包含nav的高度等等都是須要考慮的問題，因此這一部分本身仍是理解的不到位，因此滾動的高度具體的調節都是經過實驗的方式獲得的。
2. scroll()事件什麼時候觸發是我一開始不太明白的，好比changeNav(){}我定義在methods中，而後使用v-on:click="changeNav()"調用便可，那麼scroll()這類事件應該放在哪裏觸發呢？在vue中咱們將這些事件定義在methods中，而後在mounted或是created中調用便可！