WeChatアプレットタブの左右スライドスイッチ機能実装コード

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像:

ここに画像の説明を挿入

1. はじめに

独自のアプレットでこのような機能を実装する必要がある

1. 核となる考え方

スワイパーとスクロールビューは、currentTab navScrollLeft の 2 つの変数を共有します。ナビゲーションをクリックするか、スワイパーをスライドすると、2 つの変数の値が現在のインデックスに設定されます。

2. 実装

タブナビゲーションバーは<scroll-view>タグを使用し、コンテンツは<swiper>を使用します。

1.wxml実装

<ビュークラス="コンテナ">
 <!-- タブ ナビゲーション バー -->
 <!-- scroll-left 属性はスクロール バーの位置を制御できます -->
 <!-- scroll-with-animation スクロールはアニメーション遷移を追加します -->
 <!-- 
  スクロールx="true"
  navScrollLeft: 初期値 0 navData: タブテキスト
  配列の現在の要素の変数名を指定するには、wx:for-item を使用します。
  配列の現在のインデックスの変数名を指定するには、wx:for-index を使用します。
  -->

  <!--タブ -->
 <スクロールビュー scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
  <block wx:for="{{navData}}" wx:for-index="idx​​" wx:for-item="navItem" wx:key="idx​​">
   <!-- 選択されているかどうかを判断し、選択されている場合はスタイルを設定します-->
   <!-- スイッチナビゲーション -->
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
    {{navItem.text}} 表示>
  </ブロック>
 </スクロールビュー>


 <!-- ページコンテンツ -->
 <!--duration="300": スライドアニメーションの持続時間 -->
 <!-- スイッチタブ -->
 <スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab">
  <スワイパーアイテム wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="タブアイテム" wx:for-index="idx​​" wx:key="idx​​"
   クラス="タブコンテンツ">
   {{タブアイテム}}
  </スワイパーアイテム>
 </スワイパー>
</ビュー>

2.js実装

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ({
 データ: {
  ナビデータ:[
   {
    テキスト: 「ニュース」
   },
   {
    テキスト: 「告白」
   },
   {
    テキスト: 「テイクアウト」
   },
   {
    テキスト: 「家庭教師になる」
   },
   {
    テキスト: 「家庭教師を探す」
   },
   {
    テキスト: 「家を借りる」
   },
   {
    テキスト: 「自動車学校」
   }
  ]、
  現在のタブ: 0,
  navScrollLeft: 0
 },
 //イベント処理関数 onLoad: function () {
  
 },
 switchNav(イベント){
  // 現在のタブのIDを取得します
  var cur = event.currentTarget.dataset.current; 
  //各タブオプションは幅の1/5を占めます
  var singleNavWidth = this.data.windowWidth / 5;

  //タブオプションを中央に配置する this.setData({
   navScrollLeft: (現在 - 2) * シングルナビゲーション幅
  }) 
  // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) {
   false を返します。
  } それ以外 {
   this.setData({
    現在のタブ: cur
   })
  }
 },
 
 switchTab(イベント){
  var cur = イベントの詳細.current;
  var singleNavWidth = this.data.windowWidth / 5;
  this.setData({
   現在のタブ: cur,
   navScrollLeft: (現在 - 2) * シングルナビゲーション幅
  });
 }
})

3.wxss実装

/**index.wxss**/
ページ {
 幅: 100%;
 高さ: 100%;
}

。容器 {
 幅: 100%;
 高さ: 100%;
}

.nav {
 /* タブナビゲーションの幅と高さを設定する*/
 高さ: 80rpx;
 幅: 100%;

 /* 2つの枠線付きボックスを並べて配置する必要がある場合、
 これは、box-sizing を "border-box" に設定することで実行できます。 */
 ボックスのサイズ: 境界線ボックス;

 オーバーフロー: 非表示;

 /* 中心 */
 行の高さ: 80rpx;

 背景:
 #f7f7f7;

 フォントサイズ: 16px;

 /* 段落内のテキストが折り返されないことを指定します: */
 空白: ラップなし;

 位置: 固定;
 上: 0;
 左: 0;
 zインデックス: 99;
}

.nav-item {
 幅: 20%;
 表示: インラインブロック;
 テキスト配置: 中央;
}

.nav-item.active {
 色:
 緑;
}

.タブボックス{
 背景:
 rgb(31, 201, 96);
 /* これをナビゲーションの高さに設定します*/
 パディングトップ: 80rpx;
 高さ: 100%;
 ボックスのサイズ: 境界線ボックス;
}

.タブコンテンツ{
 /* div 要素内のコンテンツの左端/右端を切り取ります - 要素のコンテンツ領域からオーバーフローする場合: */
 overflow-y: スクロール;
}

3. 参考文献と要約

この記事は https://www.jb51.net/article/169290.htm を参照しています。

解決プロセス
1. タブの幅は1/5に固定されており、タブの内容に応じて変更できるように改善できます。

4. 最適化

0. レンダリング

ここに画像の説明を挿入

1. 各タブの長さは適応的です 2. 前のタブをクリックすると

現在 1 にいるときに 3 をクリックすると、パスは 1-2-3 になります。実機テストの後、エクスペリエンスに影響を与えることなく 3 に直接ジャンプします。

// ****************************** ナビゲーション バーを選択すると、ナビゲーション バーの ID と位置が取得されます ********************************************
 タブ選択(e) {
 console.log("結果:", e);
 //ニュースデータベースを操作する var cur = e.currentTarget.dataset.id;
 //タブオプションを中央に配置する this.setData({
  // 各タブのID
  TabCur: e.currentTarget.dataset.id、
  
  //適応スクロール左: (e.currentTarget.dataset.id) * 60,
 })

 // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) {
  false を返します。
 } それ以外 {
  this.setData({
  現在のタブ: cur
  })
 }
 console.log(e.currentTarget.dataset.id);
 コンソールにログ出力します。
 console.log("水平スクロールバーの位置", this.data.scrollLeft);
 },
 スイッチタブ(e) {
 コンソールログ(e);
 var cur = e.detail.current;
 this.setData({
  TabCur: cur、
  スクロール左: cur * 60,
 });
 }

これで、WeChatミニプログラムタブスライド切り替え機能の実装コードに関するこの記事は終了です。より関連性の高いミニプログラムタブスライド切り替えコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットのタブ切り替えは、スクロール実装コードに従ってナビゲーションバーを切り替えるためにスライドすることができます
  • WeChat アプレットのカスタムスライドトップ TabBar タブでページ切り替え機能を実現する例
  • WeChatアプレットのスライドタブ切り替えを実装するための10行のコード
  • WeChatアプレットのスクロールタブで左右のスライド切り替えを実現
  • WeChatアプレットは、スライドジェスチャーでページを切り替える
  • WeChatアプレットは左右にスワイプしてページを切り替える詳細な説明とサンプルコード

<<:  mysql init_connect に関するいくつかの重要なポイントの要約

>>:  あなたが知らない Linux KDE アプリケーション 11 選

推薦する

HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明

目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...

オンラインチャットを実現するVue+sshフレームワーク

この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...

Dockerイメージの作成、保存、読み込み方法

イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...

スタイル属性 (element.style) で定義されたインライン スタイルを削除する方法

Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...

Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript

目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...

Vueのsync修飾子の詳細な説明

目次1. 手順2. 修飾語3. .sync 修飾子4. まとめ1. 手順指示とは命令です。文字通りの...

js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析

目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...

HTM と HTML の違いは何ですか? HTM と HTML の違いは何ですか?

Web デザインを学習する過程で、html と htm の関係など、遭遇した多くの問題について深く...

外部ネットワークアクセスを許可するためのMysql5.6の設定手順の詳細を共有する

最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...

MySQLのSQLモードの特徴のまとめ

序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...