小程序开发之选项卡的简单实现实例

微信小程序 选项卡的简单实例

看下效果

代码：

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

【相关推荐】

1. 微信公众号平台源码下载

2. 微信投票源码

3. 微信啦啦外卖2.2.4解密开源版 微信魔方源码

以上就是小程序开发之选项卡的简单实现实例的详细内容，更多内容请关注技术你好其它相关文章！