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

彼女は 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( "------" );  
  }  
});

最終的なデモンストレーション効果は次のとおりです:

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

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

関連記事:

タブタブ効果のWeChatミニプログラム実装

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

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