WeChatアプレットは水平および垂直スクロールを実現

WeChatアプレットは水平および垂直スクロールを実現

この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

キーポイント スワイパー内部設定 スクロールビュー

知らせ:

1. 垂直スクロールの高さはパーセンテージではなくpx/rpxで指定できます。
2. スワイパーの内部アイテム位置は100%
3. スワイパーの高さに値を与える必要がある
4. 水平方向にスクロールする場合は、水平方向の幅も指定する必要があります。

コード

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットのスクロールビューの非表示のスクロールバーの詳細な説明
  • WeChatアプレットのスクロールビューでスクロールの浸透を実装し、スクロールを防止する方法
  • WeChatアプレットのスクロールビューの水平スクロールの実際的な落とし穴とスクロールバーを非表示にする実装の詳細な説明
  • WeChatアプレット上部のスクロール可能なナビゲーション効果
  • WeChatアプレットのスクロールビューコンポーネントはスクロールアニメーションを実装します
  • WeChat アプレット - スクロールメッセージ通知のサンプルコード
  • WeChatアプレットのスクロールタブで左右のスライド切り替えを実現
  • WeChatアプレットがテキストスクロールを実装
  • WeChatアプレットが複数行テキストのスクロール効果を実現
  • WeChatミニプログラムがシームレスなスクロールを実現

<<:  Linux C ログ出力コード テンプレート サンプル コード

>>:  mysql57サービスが突然消えた問題をすぐに解決する

推薦する

Linux システムでの CPU 使用率が高い場合のトラブルシューティングのアイデアと解決策

序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...

Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

ブラウザは関連するHTTPヘッダーをキャッシュし、HTTPリクエストの数を最小限に抑えます。

最近、Yahoo の 34 の黄金律を読み、ウェブサイトのパフォーマンスを最適化する方法を学びました...

webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法

序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

DCL (データ制御言語): データベースのアクセス権とセキュリティ レベルを定義し、ユーザーを作成...

マウスのドラッグ効果を実現するJavaScript

この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

HTML 代替カラーコードを実現する n 通りの方法 サンプルコード

この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

Linux に MySql 5.7.21 をインストールするための詳細な手順

序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...

MySQL関数の包括的な概要

目次1. MySQLでよく使われる文字列関数2. 数値関数3. 日付と時刻の機能4. プロセス機能5...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

MySQLで数千万のテストデータを素早く作成する方法

述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...