Introduction à l'implémentation de l'onglet supérieur (swiper) dans l'applet WeChat

Cet article présente principalement en détail l'effet de l'onglet supérieur de l'applet WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'onglet supérieur de l'applet WeChat est en cours de développement Il est très couramment utilisé dans . prend un certain temps pour le mettre en œuvre ci-dessous.

Rendu :

Le code est directement en dessous :

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 () { 
 
 } 
})

Ce qui précède est le processus de mise en œuvre, qui n'est généralement pas difficile. Vous pouvez vous y référer.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

L'applet WeChat implémente l'effet des onglets de la barre de navigation

Implémentation de l'effet de classification de la barre latérale du centre commercial de l'applet WeChat

Exemple d'onglets dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!