vue實現仿今日頭條首頁選項卡的功能

這篇文章要跟大家介紹的內容是關於vue實現仿今日頭條首頁選項卡的功能，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

為了增加行動裝置專案的經驗，近一週透過 vue 仿寫今日頭條，以下就專案實現過程中遇到的問題以及解決方法給出總結。

一、實作功能

• 首頁展示

• ##查看訊息

• #圖文懶載入

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

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

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

• #點選導覽列的刷新按鈕只實現了按鈕的旋轉特效，並沒有實現頁面刷新載入功能

#二、功能小結

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实现旋转动画
     <img  alt="vue實現仿今日頭條首頁選項卡的功能" >
     
      .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');

相關文章推薦：

vue指令與$nextTick操作DOM有什麼區別?

vue中的事件阻止冒泡的用法詳解

###

以上是vue實現仿今日頭條首頁選項卡的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！