この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 キーポイント スワイパー内部設定 スクロールビュー 知らせ: 1. 垂直スクロールの高さはパーセンテージではなくpx/rpxで指定できます。 コード xml <スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab"> <スワイパーアイテムクラス="タブコンテンツ"> <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx"> <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> </ビュー> </ビュー> </スクロールビュー> </スワイパーアイテム> <スワイパーアイテムクラス="タブコンテンツ"> <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx"> <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> </ビュー> </ビュー> </スクロールビュー> </スワイパーアイテム> </スワイパー> <スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab"> <スワイパーアイテムクラス="タブコンテンツ"> <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx"> <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> </ビュー> </ビュー> </スクロールビュー> </スワイパーアイテム> <スワイパーアイテムクラス="タブコンテンツ"> <スクロールビュークラス="スクロール高さ" スクロールy="true" スクロールアニメーション="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx"> <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> </ビュー> </ビュー> </スクロールビュー> </スワイパーアイテム> </スワイパー> wxss .タブボックス{ 高さ: 1040rpx; } .スクロール高さ{ 高さ: 1040rpx; } js マイ監査(){ this.setData({ 現在のタブ:0, }) }, マイイニシエート(){ this.setData({ 現在のタブ:1, // jira配列:[] }) }, switchTab(イベント){ var cur = イベントの詳細.current; var singleNavWidth = this.data.windowWidth / 5; this.setData({ 現在のタブ: cur, navScrollLeft: (現在 - 2) * シングルナビゲーション幅 }); } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux C ログ出力コード テンプレート サンプル コード
>>: mysql57サービスが突然消えた問題をすぐに解決する
序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...
1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...
目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...
最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...
序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...
この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...
最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...
序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...
目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...
1. ノードを削除するkubectl delete node node01を実行します。 2. この...
目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....
述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...