タブ ブラウズは、単一のブラウザ ウィンドウで複数の Web サイトを開くことができる Internet Explorer の機能です。新しいタブで Web ページを開き、表示したいタブをクリックして Web ページを切り替えることができます。タブ ブラウズを使用すると、タスク バーに表示される項目の数を減らすことができる可能性があります。この記事では、タブ機能を実装するための WeChat アプレットを共有します。
まず、WeChat ミニ プログラムのタブの効果を見てください:
原則は、最初にレイアウトし (当然のことですが)、次に上の各タブで同じ内容を定義します。イベントを生成し、各コンポーネントに一意の識別子をバインドします。次に、クリック イベントがトリガーされると、バインドされた識別子を取得し、現在クリックされているタブを特定し、次にどの部分を以下に表示するかを決定します。 wxml:
<view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text> </view> <view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view> <view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>
wxss:
.menu_box{ display: flex; height: 80rpx; } .menu1,.menu2{ flex: 1; font-size:30rpx; line-height: 80rpx; text-align: center; } .borders{ border-bottom: 4rpx solid #f00; color: #f00; } .tab1,.tab2{ height: 300rpx; background: #23bff3; } .tab2{ background: #ccc; }
JS:
menuTap:function(e){ var current=e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({ menuTapCurrent:current }); },
関連推奨事項:
WeChatミニプログラムロボット自動顧客サービス機能WeChatミニプログラム模倣Hema XianshengWeChat詳細ミニプログラムの説明ビデオ、音楽、画像コンポーネントWeChat ミニ プログラムでのパスワード入力の例最も完全な WeChat ミニ プログラム プロジェクトの例以上がタブ機能を実装したWeChatアプレットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。