フロントエンドのVueをカスタマイズすることで美しいタブを自由にスクロールでき、ラベルバーのタイトルバーは背景色を設定できます。

テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。

コンポーネント化は、複数の反復を経た複雑なビジネスシナリオおよび製品を含むフロントエンドアプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や切り離しだけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。

この記事では、次のコンポーネントを紹介します。

フロントエンド Vue は自由なスクロールと絶妙なタブでカスタマイズできます。ラベルバーのタイトルバーは背景色を設定できます。完全なコードをダウンロードするには、uni-app プラグインマーケットのアドレスにアクセスしてください: https://ext. dcloud.net.cn/plugin?id=13313

フロントエンドコンポーネントの詳細については、WeChat パブリックアカウントをフォローしてください: フロントエンドコンポーネント開発

レンダリングは次のとおりです。

形式、png

# cc-scrollTag

＃＃＃＃説明書

「」「使い方」

<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>

「」

#### HTML コード実装部分

```html

<テンプレート>

<ビュークラス="コンテンツ">

<view style="height: 22px;margin: 12px 20px;">赤い背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#FA436A"></cc-scrollTag>

<view style="height: 22px;margin: 12px 20px;">オレンジ色の背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#f37b1d"></cc-scrollTag>

<view style="height: 22px;margin: 12px 20px;">ピンクの背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#e03997"></cc-scrollTag>

<view style="height: 22px;margin: 12px 20px;">緑色の背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#39b54a"></cc-scrollTag>

<view style="height: 22px;margin: 12px 20px;">黄色の背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagList" bgColor="#fbbd08"></cc-scrollTag>

<view style="height: 22px;margin: 12px 20px;">オリーブ背景のスライド式タブバー</view>



<cc-scrollTag @tabChange="tabChange" :tagsList="tagListTwo" bgColor="#8dc63f"></cc-scrollTag>

</ビュー>

</テンプレート>

<スクリプト>

デフォルトのエクスポート {

データ（） {

戻る {

タグリスト: [

「ホームページ」、「タイトル 1」、「タイトル 2」、「タイトル 3」、「タイトル 4」、

「タイトル5」、「タイトル6」、

「タイトル7」「タイトル8」

]、

タグリスト 2: [

'推薦する'、

'オプション1'、

「オプション 2」、

「オプション 3」、

「オプション 4」、

「オプション 5」、

「オプション 6」、

「オプション 7」、

「オプション 8」、

]、

}

}、

onLoad() {

}、

メソッド: {

tabChange: function(t) {

console.log("タブ選択シーケンス = " + JSON.stringify(t));

}、

}

}

</script>

<スタイル>

。コンテンツ {

ディスプレイ: フレックス;

フレックス方向: 列;

}

</スタイル>

「」

フロントエンドのVueをカスタマイズすることで美しいタブを自由にスクロールでき、ラベルバーのタイトルバーは背景色を設定できます。

おすすめ