WeChat アプレットタブ効果の実装-ミニプログラム開発-php.cn

WeChat アプレットタブ効果の実装

高洛峰

リリース： 2017-03-24 13:43:23

オリジナル

2571 人が閲覧しました

WeChat アプレットタブの効果

前書き:

最近、WeChat アプリケーションアカウントが本格化し、非常に人気がありますが、検索キーワードを見つけることもでき、さまざまな Web サイトに表示されるのは WeChat の公式文書の説明です。ちょうどこの流行に追いつくために、私はここ数日でミニプログラムの技術ドキュメントを読み、それからケースを直接書き始めました。 WeChat 内には多くのコンポーネントがパッケージ化されていますが、タブ効果がないことがわかったので、ここ 2 日間で勉強したところです。考え方は次のとおりです:

1. まず、ナビゲーションをクリックするときに、2 つの変数が必要です。1 つは現在のクリックスタイルクラスを保存するもので、もう 1 つは他のナビゲーションのデフォルトのスタイルクラスです。タブのコンテンツリストには 2 つの変数も必要です。1 つは現在の表示ブロックを保存するもので、もう 1 つは他の非表示のデフォルトブロックを保存するものです

3。 Index [ここでは、クリックイベントを親ナビゲーションバーにバインドしています。ターゲットオブジェクトは、クリックによってトリガーされたイベントオブジェクトのプロパティを取得します]

次のレンダリングを組み合わせてください:

微信小程序 tabs选项卡效果的实现次に、ソースコードを表示します。直接:

demo.wxml:

<view class="tab">
<view class="tab-left" bindtap="tabFun">
 <view class="{{tabArr.curHdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd01" data-id="0">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd02" data-id="1">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd03" data-id="2">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd04" data-id="3">tab-hd01</view>
</view>
 
<view class="tab-right">
 <view class="right-item {{tabArr.curBdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd01</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd02</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd03</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd04</view>
</view>
</view>

ログイン後にコピー

demo.js:

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

ログイン後にコピー

demo.wxss:

.tab{
 display: flex;
 flex-direction: row;
}
.tab-left{
 width: 200rpx;
 line-height: 160%;
 border-right: solid 1px gray;
}
.tab-left view{
 border-bottom: solid 1px red;
}
.tab-left .active{
 color: #f00;
}
.tab-right{
 line-height: 160%;
}
.tab-right .right-item{
 padding-left: 15rpx;
 display: none;
}
.tab-right .right-item.active{
 display: block;
}

ログイン後にコピー

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

微信小程序 tabs选项卡效果的实现