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サービスが突然消えた問題をすぐに解決する

推薦する

77.9K の GitHub リポジトリを持つ Axios プロジェクト: 学ぶ価値のあることは何でしょうか?

目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...

ブラウザでのjsのイベントループイベントキューの詳細な説明

目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...

Ubuntu 向け VMware Tools のインストールと構成のチュートリアル

以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...

Linux で binlog ファイルの作成時間を表示するコマンド

目次背景分析する方法背景MySQL は 26 日の 16:23:49 に大量のスロー クエリを生成し...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

Linux CRM デプロイメント コードの詳細な説明

Linuxの基本設定 Linux環境でpython3をコンパイルしてインストールする 1. Linu...

少なくともn日間連続してログインしているユーザーに対するSQLクエリ

MySQL ツールを使用して、3 日間連続する例を見てみましょう。 1. SQL テーブルを作成しま...

Nginx 構成 クロスドメイン リクエスト Access-Control-Allow-Origin * 詳細な説明

序文403 クロスオリジン エラーが発生しNo 'Access-Control-Allow-...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...

CentOS SVN サーバーで複数のプロジェクトを管理する方法

一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...