Exemple d'onglets dans le mini-programme WeChat

Cet article présente principalement des informations pertinentes sur des exemples simples d'onglets d'applet WeChat. Les amis dans le besoin peuvent se référer à

Exemples simples d'onglets d'applet WeChat

Regardez l'effet

Code :

home.wxml

<!--pages/home/home.wxml-->
<view class="swiper-tab"> 
  <view class="swiper-tab-item {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">热门</view> 
  <view class="swiper-tab-item {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">关注</view> 
  <view class="swiper-tab-item {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">好友</view> 
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px" bindchange="bindChange"> 
  <swiper-item> 
   <view>热门</view> 
  </swiper-item> 
  <swiper-item> 
   <view>关注</view> 
  </swiper-item> 
  <swiper-item> 
   <view>好友</view> 
  </swiper-item> 
</swiper>

home.wxss

/* pages/home/home.wxss */
.swiper-tab{ 
  width: 100%; 
  border-bottom: 2rpx solid #eeeeee; 
  text-align: center; 
  line-height: 80rpx;} 
.swiper-tab-item{ font-size: 30rpx; 
  display: inline-block; 
  width: 33.33%; 
  color: #666666; 
} 
.on{ color: #f10b2e; 
  border-bottom: 5rpx solid #f10b2e;} 

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper-box view{ 
  text-align: center; 
}

home.js

// pages/home/home.js
var app = getApp()
Page({
 data: {

  winWidth: 0,
  winHeight: 0,
  // tab切换 
  currentTab: 0,
 },
 onLoad: function () {
  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
   })
  }
 }
})

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 :

Développement d'une applet WeChat pour implémenter le changement de page à onglet

Saut de page de l'applet WeChat Mise en œuvre de la valeur de transfert

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!