欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 11:49:10
微信小程序 选项卡的简单实例 看下效果 代码: home.wxml <...

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

看下效果

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

代码:

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!