vue 仿今日頭條

Sourcelink 發布于2019-08-23 10:40 / 3230人閱讀

摘要：在下沒有該問題。解決辦法部分這里隨意，需要用設定部分問題懶加載解決方法稍后補充參考文獻組件按需加載路由懶加載項目中使用將多個組件合并打包并實現按需加載

vue 仿今日頭條

為了增加移動端項目的經驗，近一周通過 vue 仿寫今日頭條，以下就項目實現過程中遇到的問題以及解決方法給出總結，有什么不正確的地方，懇請大家批評指正^?_?^！，代碼倉庫地址為 github

一、實現功能

首頁展示

查看消息

圖文懶加載

滑動選項卡，切換頻道，點擊頻道切換不同新聞

點擊選項卡的 + 按鈕，實現頻道的添加和刪除

點擊搜索按鈕，輸入關鍵字，回車進行實時搜索，在結果中高亮顯示關鍵字

點擊導航欄的刷新按鈕只實現了按鈕的旋轉特效，并沒有實現頁面刷新加載功能

二、功能小結

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

使用彈性布局，部分代碼實現如下：

 
    {{item.title}}

 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實現旋轉動畫
     
     
      .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, `${this.searchKey}`)

 2.8 問題：基于 vue 的實時搜索，在結果中高亮顯示關鍵字
     解決辦法：
     萬能的```replace```函數, searchKey 為關鍵字
     title = title.replace(this.searchKey, `${this.searchKey}`)

 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 將多個組件合并打包并實現按需加載

云服務器 GPU云服務器今日頭條和頭條視頻今日頭條今日頭條爬蟲今日頭條數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96577.html

Vue2.0仿今日頭條

摘要：基于仿照今日頭條的移動端項目源碼地址預覽地址前言先占個坑位。項目中還有許多可以完善的地方，不足之處希望小伙伴們可以，我會在這里更新。目前還沒有全面地測試該項目，有問題提問，大家一起學習。 toutiao 基于Vue2.0仿照今日頭條的移動端項目源碼地址：toutiao_Vue2.0 預覽地址：toutiao_Vue2.0 前言先占個坑位。之前打算做個東西熟悉vue的使用，由于...

pepperwang 2019-08-20 18:26 評論0 收藏0
vue 仿今日頭條

摘要：在下沒有該問題。解決辦法部分這里隨意，需要用設定部分問題懶加載解決方法稍后補充參考文獻組件按需加載路由懶加載項目中使用將多個組件合并打包并實現按需加載 vue 仿今日頭條為了增加移動端項目的經驗，近一周通過 vue 仿寫今日頭條，以下就項目實現過程中遇到的問題以及解決方法給出總結，有什么不正確的地方，懇請大家批評指正^?_?^！，代碼倉庫地址為 github 一、實現功能首頁展示...

ShowerSun 2019-08-29 16:16 評論0 收藏0
React實戰篇（React仿今日頭條）

摘要：前言上次初學用寫了個后臺管理，這次便尋思寫個移動端的項目。便有了這次的這個項目。然后通過來判斷如何動畫具體處理異步用來書寫跟配置還有一些零零散散的知識點，就不介紹了，具體可以到上查看。個人博客在線觀看地址前言上次初學用 react 寫了個后臺管理，這次便尋思寫個移動端的項目。便有了這次的這個項目。這個項目以前寫了個 vue 的版本。有興趣的可以點擊進入模擬數據用的是 Eas...

NicolasHe 2019-08-22 16:07 評論0 收藏0