テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。
コンポーネント化は、複数の反復を経た複雑なビジネス シナリオおよび製品を含むフロントエンド アプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や切り離しだけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。
この記事で紹介するコンポーネントは次のとおりです。
フロントエンド Vue は、シンプルで使いやすい製品分類リスト コンポーネントとサイドバー製品分類コンポーネントをカスタマイズします。完全なコードをダウンロードするには、uni-app プラグイン マーケット アドレス: https://ext.dcloud.net にアクセスしてください。 cn/プラグイン?id=13148
フロントエンド コンポーネントの詳細については、WeChat パブリック アカウントをフォローしてください: フロントエンド コンポーネント開発
レンダリングは次のとおりです。
# cc-defineCateList
＃＃＃＃ 説明書
「」「使い方」
<!-- data: 商品リスト配列 [{navtitle: title shop: [] 表示リスト}] @click: 商品エントリークリックイベント -->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
「」
#### HTML コード実装部分
```html
<テンプレート>
<ビュークラス="コンテンツ">
<!-- カスタムのトップ検索ボックスは、ジャンプ SkipUrl の検索に使用されます。ジャンプ URL は絶対パス/ページで始まります -->
<cc-headSearch SkipUrl="/pages/index/search"></cc-headSearch>
<!-- data: 商品リスト配列 [{navtitle: タイトル ショップ: 表示リスト}] @click: 商品アイテムクリックイベント -->
<cc-defineCateList :data="data" @click="cateItemClick"></cc-defineCateList>
</ビュー>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
データ（） {
戻る {
// リスト配列 navtitle: title shop: 表示リスト
データ： [{
navtitle: '高品質の推奨事項 1',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: 'モバイル デジタル 2',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: '音響機器 3',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: '高品質の推奨事項 4',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: 'モバイル デジタル 5',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: '携帯電話デジタル 6',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
{
navtitle: 'モバイル デジタル 7',
店： [{
ショップタイトル: 「携帯電話 1」、
ショップ画像: "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 2」、
ショップ画像: "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
}、
{
ショップタイトル: 「携帯電話 3」、
ショップ画像: "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
}、
{
ショップタイトル：「携帯電話4」、
ショップイメージ: "../../static/image/p4.png",
}
]
}、
]
}
}、
マウントされた() {
}、
メソッド: {
cateItemClick(アイテム) {
uni.showModal({
title: 'エントリをクリック',
内容: 'クリックアイテムデータ = ' + JSON.stringify(item)
})
}
}
}
</script>
<スタイル>
ページ {
背景色: #f7f7f7;
}
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
}
</スタイル>
「」