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( "------" ); } });
最終的なデモンストレーション効果は次のとおりです:
関連記事:
タブタブ効果のWeChatミニプログラム実装
シンプルでスタイリッシュな純粋なCSS3タブタブ効果

ホットAIツール

Undress AI Tool
脱衣画像を無料で

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

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

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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