Introduction to the implementation of top tab (swiper) in WeChat applet

This article mainly introduces the top tab effect of WeChat applet in detail, which has certain reference value. Interested friends can refer to it

WeChat applet top tab is being developed It is very commonly used in . It takes a while to implement it below.

Rendering:

The code is directly below:

wxml:

<!--pages/index/index.wxml--> 
<view class="swiper-tab"> 
 <view class="tab-item {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">选项一</view> 
 <view class="tab-item {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">选项二</view> 
 <view class="tab-item {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">选项三</view> 
</view> 
 
<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange"> 
 <swiper-item> 
  <view>页面一</view> 
 </swiper-item> 
 <swiper-item> 
  <view>页面二</view> 
 </swiper-item> 
 <swiper-item> 
  <view>页面三</view> 
 </swiper-item> 
</swiper>

wxss:

/* pages/index/index.wxss */ 
.swiper-tab{ 
 width: 100%; 
 text-align: center; 
 line-height: 80rpx; 
 border-bottom: 1px solid #000; 
 display: flex; 
 flex-direction: row; 
 justify-content: center; 
} 
.tab-item{ 
 flex: 1; 
 font-size: 30rpx; 
 display: inline-block;  
 color: #777777; 
} 
.on{ 
 color: red; 
 border-bottom: 5rpx solid red; 
} 
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper view{ 
 text-align: center; 
 padding-top: 100rpx; 
}

js:

// pages/index/index.js 
Page({ 
 
 /** 
  * 页面的初始数据 
  */ 
 data: { 
  winWidth:0, 
  winHeight:0, 
  currentTab:0 
 }, 
 
 /** 
  * 生命周期函数--监听页面加载 
  */ 
 onLoad: function (options) { 
  var that = this; 
 
  /** 
   * 获取系统信息 
   */ 
  wx.getSystemInfo({ 
 
   success: function (res) { 
    that.setData({ 
     winWidth: res.windowWidth, 
     winHeight: res.windowHeight 
    }); 
   } 
 
  }); 
 }, 
 bindChange: function (e) { 
 
  var that = this; 
  that.setData({ currentTab: e.detail.current }); 
 
 }, 
 swichNav: function (e) { 
 
  var that = this; 
 
  if (this.data.currentTab === e.target.dataset.current) { 
   return false; 
  } else { 
   that.setData({ 
    currentTab: e.target.dataset.current 
   }) 
  } 
 } , 
 /** 
  * 页面相关事件处理函数--监听用户下拉动作 
  */ 
 onPullDownRefresh: function () { 
 
 }, 
 
 /** 
  * 页面上拉触底事件的处理函数 
  */ 
 onReachBottom: function () { 
 
 }, 
 
 /** 
  * 用户点击右上角分享 
  */ 
 onShareAppMessage: function () { 
 
 } 
})

The above is the implementation process, which is generally not difficult. You can refer to it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet realizes the effect of navigation bar tab

The side bar in WeChat applet mall Implementation of classification effect

Example of tabs in WeChat applet

The above is the detailed content of Introduction to the implementation of top tab (swiper) in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!