Exemple d'implémentation simple d'un onglet dans le développement d'un mini-programme

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

[Recommandations associées]

1 Code source de la plateforme de compte public WeChat Télécharger

2. Code source de vote WeChat

3. WeChat Lala Takeaway 2.2.4 version open source décryptée du code source de WeChat Rubik's Cube

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!