模仿今日頭條app開發遇到的問題

該項目用到的技術主要有：vue-cli + vuex + mockjs。 github地址

交互功能

• 點擊菜單欄添加按鈕，進入頻道管理頁面，可進行頻道添加刪除
• 點擊header左側郵箱圖片，彈出框顯示
• 點擊header右側搜索按鈕，進入搜索頁面，搜索異步查詢到結果進行高亮
• 頻道菜單欄切換異步查詢，對應頻道新聞展現
• 新聞展現懶加載，每次展現10條數據，滑到底部再加載10條。

展現功能

這裏主要講述我在實現時，以爲之後開發中可能會常常遇到的經驗問題

1.菜單欄水平方向能夠滑動展現多餘內容

如圖所示：

這裏佈局以下：

這裏我用的方法是：

咱們給這個ul外面套着一個div(.ul-box)，該div的樣式以下：

.nav-container .ul-box {
    width: 100vw;
    height: 0.8rem;
    overflow-x: scroll;
}
複製代碼

其內部的ul的樣式以下：使用彈性佈局

.nav-container .ul-box .nav-ul {
    line-height: 0.8rem;
    display: -webkit-box; 
    display: flex;
    height: 0.8rem;
    margin-right: 0.2rem;
}
複製代碼

第二種方法，使用white-space: norwrap

這裏不須要更改上面最外層div的樣式，只須要更改ul的樣式,使用white-space: norwrap

.nav-container .ul-box .nav-ul {
    line-height: 0.8rem;
    white-space: norwrap//劃重點就是這句話
    height: 0.8rem;
    margin-right: 0.2rem;
}
複製代碼

2.新聞卡片，不一樣類型的卡片不一樣的佈局

這裏的新聞有四種不一樣佈局

• 沒有圖片的新聞
• 有一個圖片非廣告類新聞
• 有三張圖片的非廣告類新聞
• 廣告

針對這四種不一樣類型的卡片，個人區分是首先我以爲後端可能給個人數據只會分新聞和廣告，因此我用一個字段判斷是新聞仍是廣告，而後對新聞就是經過判斷該條新聞的圖片個數，來進一步肯定不一樣佈局。

項目遇到的奇奇怪怪的bug和注意事項

1. 對router-link添加點擊事件不起做用

<router-link @click.native="changeTab(item.id)" :to= "{path: '/home/' + item.id}" tag="a" :data-id="item.id" :class="{selected: curIndex === item.id}">{{item.name}}</router-link>
複製代碼

這裏須要給這個點擊事件後面加上.native，加上這個以後，就將這個vue組件轉爲普通的html元素。給vue組件綁定原生事件就須要.native修飾v-on，不然沒法註冊成功

2.header佈局，左側元素float:left，讓中間元素居中，我發現浮動的元素會影響中間元素 其佈局圖就是這樣：

因爲我通常狀況下是能不用定位就不用，這裏我第一想法是父元素設置text-align:center,左邊元素浮動便可，浮動元素脫離文檔流啊。。。嗯。。想法很好，然而我發現左浮的元素居然佔空間，中間的元素明顯往右移動了不少。。。忍無可忍，我使用了定位，果真定位真是厲害。這裏我就頗有點疑惑了，不都是脫離文檔流嗎，咋會有不同的效果。

經過查閱資料發現，css中的脫離文檔流是將元素從普通的佈局排版中拿走，這樣其餘元素在頁面佈局時，會忽略脫離文檔流的元素。可是注意一樣是脫離文檔流，浮動的元素和定位的元素仍是有區別的：
浮動元素：使用浮動的元素，雖然該元素已經脫離文檔流了，可是頁面中其餘盒子內的文本依然會爲這個元素讓出位置
定位元素：頁面中的其餘元素會完全無視

示例： 分別對div1使用浮動和絕對定位，其效果差以下

<div class="header">
    <div class="left">div1</div>
    <div class="center">div2</div>
</div>
複製代碼

.header .left {
        /* float: left; */
        position: absolute;
        left: 0;
        background: #f00;
    }
.header .center {
    background: #0ff;
}
複製代碼

float:left;

position:absolute;

3.關鍵詞搜索高亮

一開始的寫法是：

let exchangeKey = '<highlight>' + key + '</highlight>'
arr[index].title = arr[index].title.replace(key, exchangeKey)//key是用戶輸入的內容
複製代碼

比較懂正則的應該發現，我忘記全局匹配了，這個點真的須要注意考慮全面，一開始我寫的假數據中一句話中也不會有重複的詞，因此也沒發現，一直到後期看正則表達式才發現這個點。 進一步修改成：

let reg = new RegExp("(" + key + ")", "ig");
arr[index].title = arr[index].title.replace(reg, '<highlight>$1</highlight>')
複製代碼

這下就沒有啥問題了

4.去掉url上的#
在目錄router/index.js里加上mode: 'history'
vue-router有兩種模式(這兩種模式的區別，以及應用場景還須要進一步學習和總結)

• hash
• history

5.vuex的使用
這裏不贅述，以前總結了

6.mock的使用
見其餘總結

7.返回上一頁

常見的返回上一頁的方法有：

• window.history.go(-1);
• window.history.back(-1);

進入下一頁的方法有：

• window.history.forward()

以上的方法都會刷新頁面，咱們的項目中使用了vuex，因此刷新是不可以的，請使用路由的跳轉

8.將mock.js放入mock文件夾內，再在store文件夾裏import路徑會出錯
這個問題暫時沒有解決，就仍是將mock.js放在mock文件夾外了，可是看着真是不舒服

9.使用mapState只能讀state裏的值，不能夠進行修改
修改請在actions.js或者mutations.js裏修改，或者使用store.state取值修改

10.npm run build後dist文件夾裏index.html找不到對應靜態資源

改config文件裏的index.js

11.新聞消息懶加載
懶加載主要是監聽window.onscroll事件來處理，這裏注意滑動到底部以後，會發現一直會觸發，這樣會出現抖屏的現象，因此這裏我是使用一個canGetMoreList標誌位進行判斷，只有當異步請求成功以後canGetMoreList爲true。判斷滑到底部且canGetMoreList爲true時才發送異步請求。

window.onscroll = function () {
    var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
    var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
    if (scrollT >= scrollH - clientH && store.state.canGetMoreList) {
        this.pageNum++
        store.state.showMoreFlag = true
        e.state.canGetMoreList = false
        setTimeout (function () {
            this.getList(this.curIndex)
        }.bind(this), 200)
    }
}.bind(this)
複製代碼

項目總結

每一次作一個完整的項目就好像是一個掃盲的過程，只有在遇到問題的時候才知道本身有多麼的無知，給本身列一個下一步的學習計劃：

• 網絡方面的知識
• 正則表達式的學習
• webpack的配置學習