Maison > Article > Applet WeChat > 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 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view> <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">关注</view> <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" 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
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!