タブ機能を実装したWeChatアプレット-ミニプログラム開発-php.cn

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

小云云

リリース： 2018-05-15 14:15:30

オリジナル

2299 人が閲覧しました

タブブラウズは、単一のブラウザウィンドウで複数の 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
 });


 },

ログイン後にコピー