テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。
コンポーネント化は、複数の反復を経た複雑なビジネス シナリオおよび製品を含むフロントエンド アプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や切り離しだけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。
この記事で紹介するコンポーネントは次のとおりです。
フロントエンド vue プルアップ ロード プルダウン リフレッシュ コンポーネントは、リスト ページングとローカル ページングをサポートしています。完全なコードをダウンロードするには、uni-app プラグイン マーケット アドレスにアクセスしてください: https://ext.dcloud.net.cn /プラグイン?id=12942
フロントエンド コンポーネントの詳細については、WeChat パブリック アカウントをフォローしてください: フロントエンド コンポーネント開発
レンダリングは次のとおりです。
＃＃＃＃ 説明書
「」「使い方」
<!-- pullDown: プルダウンして更新します back-top: トップに戻ります -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
</ccPullScroll>
「」
#### HTML コード部分
```html
<テンプレート>
<ビュークラス="コンテンツ">
<!-- -->
<div class="mui-content-padded">
<!-- pullDown: プルダウンして更新します back-top: トップに戻ります -->
<ccPullScroll class="pullScrollView" ref="pullScroll" :back-top="true" :pullDown="pullDown">
<!-- リストコンポーネント -->
<CCBProjectList :productList="プロジェクトリスト" @click="goProDetail"></CCBProjectList>
</ccPullScroll>
</div>
</ビュー>
</テンプレート>
「」
#### JS コード (データを入力するコンポーネントの導入)
```JavaScript
<スクリプト>
CCBProjectList を '../../components/ccPageView/CCProjectList.vue' からインポートします。
'../../components/ccPullScroll/index.vue' から ccPullScroll をインポートします
デフォルトのエクスポート {
コンポーネント: {
CCBプロジェクトリスト、
ccプルスクロール
}、
データ（） {
戻る {
//リストの総数
合計数: 60、
// デフォルトではページ番号は 1 から始まります
なぜページ番号: 1、
// リスト配列
プロジェクトリスト: []
}
}、
マウントされた() {
// ページ更新メソッドは自動的にプルダウンを 1 回呼び出します
this.pageRefresh();
}、
メソッド: {
pageRefresh() {
myThis = this; とします。
this.$nextTick(() => {
myThis.$refs.pullScroll.refresh();
});
}、
pullDown(pullScroll) {
console.log('プルダウンして更新');
this.projectList = [];
this.curPageNum = 1;
setTimeout(() => {
this.requestData(pullScroll);
}, 300);
}、
// プルアップしてロードする
onReachBottom() {
// すべてのデータがロードされます
if (this.curPageNum * 10 >= this.totalNum) {
} それ以外 {
this.curPageNum++;
this.requestData();
}
}、
//リスト項目のクリックイベント
goProDetail(アイテム) {
}、
requestData() {
//リクエストパラメータの設定をシミュレートする
let reqData = {
'エリア'： ''、
「ページサイズ」: 10、
"ページ番号": this.curPageNum
}
myThis = this; とします。
setTimeout(関数() {
//リクエストインターフェースをシミュレートする
for (i = 0; i < 10; i++) {
myThis.projectList.push({
'proName': '製品名' + i,
'proUnit': '会社名' + i,
'エリア': '広東省',
'proType': '地方プロジェクト',
'stage': '建設が始まりました',
'id': 10 * (myThis.curPageNum + i) + myThis.curPageNum + ''
});
}
//リストの総数
myThis.totalNum = 60;
// 最終ページの場合
if (myThis.curPageNum * 10 >= myThis.totalNum) {
myThis.$refs.pullScroll.finish();
} それ以外 {
// 最後のページではありません
myThis.$refs.pullScroll.success();
}
}, 600);
}
}
}
</script>
「」
#### CSS
```css
<スタイル>
ページ {
背景色: #f7f7f7;
}
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
}
.mui-content-padded {
マージン: 0px 14px;
/* 背景色: #ffffff; */
}
.pullScrollView {
ディスプレイ: フレックス;
フレックス方向: 列;
}
</スタイル>
「」