ホームページ WeChat アプレット ミニプログラム開発 WeChat ミニ プログラム: タブ効果の実装方法の例

WeChat ミニ プログラム: タブ効果の実装方法の例

May 29, 2018 pm 03:01 PM

彼女は WeChat ミニ プログラムを使い始めたばかりですが、WeChat 内の多くのコンポーネントがパッケージ化されていることに気付きましたが、最近それを使用する必要があったので、いくつか調べました。問題点や改善点があれば、みんなで話し合って学べるようにまとめられていますので、ぜひコメントや苦情を言ってください。

まず、ナビゲーションをクリックするときに、2 つの変数が必要です。1 つは現在のクリック スタイル クラスを保存するためのもので、もう 1 つは他のナビゲーションのデフォルトのスタイル クラスです。

タブのコンテンツ リストにも 2 つの変数が必要です。変数、1つは現在の表示ブロックを格納し、もう1つは格納されている別の非表示のデフォルトブロックです

三項演算を使用して、クリックしてナビゲーションインデックスを取得し、そのインデックスに基づいて現在のクラスを追加するかどうかを判断します [注意] , ここでは、クリック イベントを親ナビゲーション バーにバインドし、ターゲット オブジェクトのプロパティを通じてクリックによってトリガーされたイベント オブジェクトを取得します。 js

<blockquote><view class="tab">

demo.wxss

Page( {  
  data: {  
    tabArr: {  
      curHdIndex: 0,  
      curBdIndex: 0  
    },  
  },  
  tabFun: function(e){  
    //获取触发事件组件的dataset属性  
    var _datasetId=e.target.dataset.id;  
    console.log("----"+_datasetId+"----");  
    var _obj={};  
    _obj.curHdIndex=_datasetId;  
    _obj.curBdIndex=_datasetId;  
    this.setData({  
      tabArr: _obj  
    });  
  },  
  onLoad: function( options ) {  
    alert( "------" );  
  }  
});

最終的なデモンストレーション効果は次のとおりです:  微信小程序:如何实现tabs选项卡效果示例

概要: Kagami_Tiger 原理は、タブを選択し、選択したタブのコンテンツを呼び出し、他のタブのコンテンツを非表示にすることです。もちろん、各タブを別のページに分類し、各タブをそれぞれ別のページに対応させることができれば、より効率的になる可能性があります。私はそれをそのように開発したわけではありません。それを共有することを歓迎します。お互いに学ぶことによってのみ、一緒に進歩することができます。

WeChat アプレットの詳細: タブ効果の実装方法の例については、PHP 中国語 Web サイトの関連記事に注目してください。

 微信小程序:如何实现tabs选项卡效果示例関連記事:

 微信小程序:如何实现tabs选项卡效果示例タブタブ効果のWeChatミニプログラム実装

シンプルでスタイリッシュな純粋なCSS3タブタブ効果

タブタブ切り替え効果のJavascript実装

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)