摘要：在下沒(méi)有該問(wèn)題。解決辦法部分這里隨意，需要用設(shè)定部分問(wèn)題懶加載解決方法稍后補(bǔ)充參考文獻(xiàn)組件按需加載路由懶加載項(xiàng)目中使用將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載

為了增加移動(dòng)端項(xiàng)目的經(jīng)驗(yàn)，近一周通過(guò) vue 仿寫(xiě)今日頭條，以下就項(xiàng)目實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題以及解決方法給出總結(jié)，有什么不正確的地方，懇請(qǐng)大家批評(píng)指正^?_?^！，代碼倉(cāng)庫(kù)地址為 github

首頁(yè)展示

查看消息

圖文懶加載

滑動(dòng)選項(xiàng)卡，切換頻道，點(diǎn)擊頻道切換不同新聞

點(diǎn)擊選項(xiàng)卡的 + 按鈕，實(shí)現(xiàn)頻道的添加和刪除

點(diǎn)擊搜索按鈕，輸入關(guān)鍵字，回車(chē)進(jìn)行實(shí)時(shí)搜索，在結(jié)果中高亮顯示關(guān)鍵字

點(diǎn)擊導(dǎo)航欄的刷新按鈕只實(shí)現(xiàn)了按鈕的旋轉(zhuǎn)特效，并沒(méi)有實(shí)現(xiàn)頁(yè)面刷新加載功能

2.1 選項(xiàng)卡封裝為一個(gè)組件，滑動(dòng)選項(xiàng)卡效果如下：

使用彈性布局，部分代碼實(shí)現(xiàn)如下：

 

    
{{item.title}}
 

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

 2.3 問(wèn)題：vue 入口文件 main.js 引入 vuex 的 store 時(shí)不起作用
     解決辦法： store 不可以大寫(xiě)

 2.4 問(wèn)題：移動(dòng)端通過(guò)控制根元素的 font-size 值實(shí)現(xiàn)設(shè)備的適配時(shí)，塊級(jí)元素始終有默認(rèn)的寬度
     解決辦法： 我的理解是因?yàn)楦厥冀K有 font-size 的值，塊級(jí)元素繼承了font-size，所以給它重新設(shè)置font-size就可以改變?cè)氐母叨取?/pre>
 2.5 問(wèn)題：點(diǎn)擊元素，該元素360°旋轉(zhuǎn)
     解決辦法： 
     類(lèi)rotate實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫(huà)
     
     
      .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 問(wèn)題：組件按需加載（其他方法見(jiàn)參考文獻(xiàn)）
         解決辦法： 
           {
                path: "/promisedemo",
                name: "PromiseDemo",
                component: resolve => require(["../components/PromiseDemo"], resolve)
            }
 2.8 問(wèn)題：基于 vue 的實(shí)時(shí)搜索，在結(jié)果中高亮顯示關(guān)鍵字
     解決辦法：
     萬(wàn)能的```replace```函數(shù), searchKey 為關(guān)鍵字
     title = title.replace(this.searchKey, `${this.searchKey}`)
 2.8 問(wèn)題：基于 vue 的實(shí)時(shí)搜索，在結(jié)果中高亮顯示關(guān)鍵字
     解決辦法：
     萬(wàn)能的```replace```函數(shù), searchKey 為關(guān)鍵字
     title = title.replace(this.searchKey, `${this.searchKey}`)
 2.9 問(wèn)題：解決安卓平臺(tái)下，input標(biāo)簽被遮擋問(wèn)題，用戶點(diǎn)擊 input 時(shí)，父級(jí)元素上移，其他元素不變。在 ios 下沒(méi)有該問(wèn)題。
     解決辦法：
     css部分：
        body{
            width:100%;
            height:100%;
            overflow:scrool;
        } 
        .container{
            width: 100%;
            height: （這里隨意，需要用js設(shè)定）;
            position: absolute;
            top: 0;
        }    
        js部分：
        var winHeight = document.documentElement.clientHeight;
        $(".container").css("height",winHeight+"px");
  2.10 問(wèn)題： 懶加載
       解決方法：稍后補(bǔ)充

參考文獻(xiàn)
https://segmentfault.com/a/11...  組件按需加載
https://router.vuejs.org/zh/g...  路由懶加載
https://segmentfault.com/a/11...   項(xiàng)目中使用 webpack 將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載