小程序开发之选项卡怎么弄

发布时间:2021-01-28 11:10:05 作者:小新
来源:亿速云 阅读:128

这篇文章主要介绍小程序开发之选项卡怎么弄,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

看下效果

小程序开发之选项卡怎么弄

代码:

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. 微信小程序开发之选项卡(窗口底部TabBar)页面切换
  2. 小程序开发中如何利用Tab实现一个滚动选项卡

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:PHP多进程与信号中断实现多任务常驻内存管理的示例分析

下一篇:微信小程序中如何将less文件编译成wxss文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》