VueはToutiaoのホームページタブを模倣する機能を実装しています

この記事では、Toutiao のホームページ タブを模倣する Vue の機能を紹介します。必要な方は参考にしていただければ幸いです。

モバイル端末プロジェクトの経験を増やすために、ここ 1 週間で vue を通じて Toutiao を真似しました。以下は、プロジェクトの実装中に発生した問題とその解決策の概要です。

1. 機能の実装

• ホームページの表示

• グラフィックとテキストの遅延読み込み

• タブをスワイプしてチャンネルを切り替え、切り替えるチャンネルをクリックしてくださいさまざまなニュース

• オプションカードの+ボタンをクリックしてチャンネルを追加および削除します

• 検索ボタンをクリックしてキーワードを入力し、Enterを押してリアルタイム検索を実行し、結果内のキーワードをハイライト表示します

• ナビゲーションバーの更新ボタンをクリックしてボタンのみを実装します 回転特殊効果はページ更新読み込み機能を実現しません

• 2. 機能概要

2.1 タブはコンポーネントとしてカプセル化されており、スライドタブの効果は次のとおりです:

伸縮性のあるレイアウトを使用する部分 コードは次のように実装されます:

    
• {{item.title}}
 

2.2 問題: img を水平に配置し、display:inline-block を設定すると、デフォルトのギャップが存在します。

解決策: 親要素に font-size: 0 を追加します

2.3 問題: vue エントリー ファイル main.js が導入されていますが、vuex のストアを使用すると機能しません

解決策: ストアを大文字にできません

2.4 問題:モバイル端末はルート要素の「font-size」値を制御することでデバイス適応を実装し、ブロックレベル要素は常にデフォルトの幅を持ちます

解決方法: 私の理解では、ルート要素は常に「font-size」の値を持ち、ブロックレベルの要素は「font-size」を継承するため、「font-size」をそれにリセットすると要素の高さが変更される可能性があります。

2.5 問題: 要素をクリックすると、要素が 360°回転します

解決策:

     类rotate实现旋转动画
     <img  class="rotate lazy" src="/static/imghw/default1.png" data-src="../assets/img/refresh.png" alt="VueはToutiaoのホームページタブを模倣する機能を実装しています" >
     
      .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 問題: 下の入力タグの問題を解決しますAndroid プラットフォーム オクルージョンの問題。ユーザーが入力をクリックすると、親要素が上に移動しますが、他の要素は変更されません。 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');

おすすめ関連記事:

DOM を操作する vue 命令と $nextTick の違いは何ですか? 使い方の詳細説明

以上がVueはToutiaoのホームページタブを模倣する機能を実装していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。