VueはToutiaoのホームページタブを模倣する機能を実装しています-jsチュートリアル-php.cn

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

不言

リリース： 2018-08-04 11:52:25

オリジナル

4372 人が閲覧しました

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

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

1. 機能の実装

ホームページの表示
グラフィックとテキストの遅延読み込み
タブをスワイプしてチャンネルを切り替え、切り替えるチャンネルをクリックしてくださいさまざまなニュース
オプションカードの+ボタンをクリックしてチャンネルを追加および削除します
検索ボタンをクリックしてキーワードを入力し、Enterを押してリアルタイム検索を実行し、結果内のキーワードをハイライト表示します
ナビゲーションバーの更新ボタンをクリックしてボタンのみを実装します回転特殊効果はページ更新読み込み機能を実現しません
2. 機能概要

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

伸縮性のあるレイアウトを使用する部分コードは次のように実装されます: VueはToutiaoのホームページタブを模倣する機能を実装しています

ログイン後にコピー

{{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  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: &#39;/promisedemo&#39;,
                name: &#39;PromiseDemo&#39;,
                component: resolve => require([&#39;../components/PromiseDemo&#39;], 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;
        $(&#39;.container&#39;).css(&#39;height&#39;,winHeight+&#39;px&#39;);

ログイン後にコピー

おすすめ関連記事:

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

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