vue 仿今日頭條

vue 仿今日頭條

爲了增長移動端項目的經驗，近一週經過 vue 仿寫今日頭條，如下就項目實現過程當中遇到的問題以及解決方法給出總結，有什麼不正確的地方，懇請你們批評指正^ _ ^！，代碼倉庫地址爲 github

1、實現功能

• 首頁展現
• 查看消息
• 圖文懶加載
• 滑動選項卡，切換頻道，點擊頻道切換不一樣新聞
• 點擊選項卡的 + 按鈕，實現頻道的添加和刪除
• 點擊搜索按鈕，輸入關鍵字，回車進行實時搜索，在結果中高亮顯示關鍵字
• 點擊導航欄的刷新按鈕只實現了按鈕的旋轉特效，並無實現頁面刷新加載功能

2、功能小結

2.1 選項卡封裝爲一個組件，滑動選項卡效果以下：

使用彈性佈局，部分代碼實現以下：

<ul class="silder-list">
    <li v-for="(item,index) in tabArr"  @click="changeTab(index,item)" :class="{'current':  currentIndex === index}" :key="item.id">{{item.title}}</li>
 </ul>

<style>
.silder-list{
    width: 6.67rem;
    height: .72rem;
    padding: .1rem .1rem;
    box-sizing: border-box;
    overflow-x: scroll;
    list-style: none;
    display: -webkit-box;
}
.silder-list li{
    width: .68rem;
    height: .52rem;
    font-size: .34rem;
    padding: 0rem .24rem;
    color: #505050bf;
}
</style>

2.2 問題：img 橫向排列設置 display:inline-block時，有默認的間隙
     解決辦法： 父元素添加 font-size：0；

2.3 問題：vue 入口文件 main.js 引入 vuex 的 store 時不起做用
     解決辦法： store 不能夠大寫

2.4 問題：移動端經過控制根元素的 font-size 值實現設備的適配時，塊級元素始終有默認的寬度
     解決辦法： 個人理解是由於根元素始終有 font-size 的值，塊級元素繼承了font-size，因此給它從新設置font-size就能夠改變元素的高度。

2.5 問題：點擊元素，該元素360°旋轉
     解決辦法： 
     類rotate實現旋轉動畫
     <img src="../assets/img/refresh.png" class="rotate"/>
     
      .rotate {
          -webkit-transform-style: preserve-3d;
          -webkit-animation: x-spin 0.7s linear;
        }
        @-webkit-keyframes x-spin {
          0% {
            -webkit-transform: rotateZ(0deg);
          }
          50% {
            -webkit-transform: rotateZ(180deg);
          }
          100% {
            -webkit-transform: rotateZ(360deg);
          }
        }

2.7 問題：組件按需加載（其餘方法見參考文獻）
         解決辦法： 
           {
                path: '/promisedemo',
                name: 'PromiseDemo',
                component: resolve => require(['../components/PromiseDemo'], resolve)
            }

2.8 問題：基於 vue 的實時搜索，在結果中高亮顯示關鍵字
     解決辦法：
     萬能的```replace```函數, searchKey 爲關鍵字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

2.8 問題：基於 vue 的實時搜索，在結果中高亮顯示關鍵字
     解決辦法：
     萬能的```replace```函數, searchKey 爲關鍵字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

2.9 問題：解決安卓平臺下，input標籤被遮擋問題，用戶點擊 input 時，父級元素上移，其餘元素不變。在 ios 下沒有該問題。
     解決辦法：
     css部分：
        body{
            width:100%;
            height:100%;
            overflow:scrool;
        } 
        .container{
            width: 100%;
            height: （這裏隨意，須要用js設定）;
            position: absolute;
            top: 0;
        }    
        js部分：
        var winHeight = document.documentElement.clientHeight;
        $('.container').css('height',winHeight+'px');
  2.10 問題： 懶加載
       解決方法：稍後補充

參考文獻

https://segmentfault.com/a/11... 組件按需加載
https://router.vuejs.org/zh/g... 路由懶加載
https://segmentfault.com/a/11... 項目中使用 webpack 將多個組件合併打包並實現按需加載