タブ機能を実装したWeChatアプレット

タブ ブラウズは、単一のブラウザ ウィンドウで複数の Web サイトを開くことができる Internet Explorer の機能です。新しいタブで Web ページを開き、表示したいタブをクリックして Web ページを切り替えることができます。タブ ブラウズを使用すると、タスク バーに表示される項目の数を減らすことができる可能性があります。この記事では、タブ機能を実装するための WeChat アプレットを共有します。

まず、WeChat ミニ プログラムのタブの効果を見てください:

原則は、最初にレイアウトし (当然のことですが)、次に上の各タブで同じ内容を定義します。イベントを生成し、各コンポーネントに一意の識別子をバインドします。次に、クリック イベントがトリガーされると、バインドされた識別子を取得し、現在クリックされているタブを特定し、次にどの部分を以下に表示するかを決定します。 wxml:

<view class="menu_box">
 <text class=&#39;menu1 {{menuTapCurrent=="0"?"borders":""}}&#39; data-current="0" catchtap="menuTap">menu1</text>
 <text class=&#39;menu2 {{menuTapCurrent=="1"?"borders":""}}&#39; data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!=&#39;0&#39;}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!=&#39;1&#39;}}">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 Xiansheng

WeChat詳細ミニプログラムの説明ビデオ、音楽、画像コンポーネント

WeChat ミニ プログラムでのパスワード入力の例

最も完全な WeChat ミニ プログラム プロジェクトの例

以上がタブ機能を実装したWeChatアプレットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。