An example tutorial on how to develop small programs and create tabs

This article mainly introduces the relevant information on the implementation of the tabs effect of the WeChat applet. The internal components of the WeChat applet do not have the function of the Tabs tab. You can implement a similar one by yourself. Friends who need it can refer to it

WeChat Mini Program tabs tab effect

Foreword:

Recently, WeChat application accounts have been in full swing and are very popular, but you can also find search When the keyword comes out, what appears on various websites are WeChat’s official document explanations. Just in time to catch up with this craze, I read through the technical documentation of the mini program in the past few days, and then started writing the case directly. Many components have been packaged inside WeChat, and I just found that there is no tab effect, so I just studied it in the past two days. The idea is as follows:

1. First, when you click navigation, you need two variables, one to store the current click style class, and the other to othernavigation Default style class

2. The tab content list also requires two variables, one to store the current display block and the other to store other hidden default blocks

3. Use ternary operation Get the navigation index by clicking, and judge whether to add the current class based on the index [Note, here I will bind the click event to the parent navigation bar, through the target object Get the event object property triggered by the click]

Please combine the following renderings:

Next, view the source code directly:

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; 
}

The final demonstration effect is as follows:

【Related recommendations】

1. Special recommendation:"php Programmer Toolbox" V0.1 version download

2. WeChat applet complete source code download

3. WeChat applet demo: Yangtao

The above is the detailed content of An example tutorial on how to develop small programs and create tabs. For more information, please follow other related articles on the PHP Chinese website!