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

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

看下效果

代码：

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

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

# 微信小程序  # 选项卡  # 小程序  # 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换  # 微信小程序实现选项卡功能  # 微信小程序的tab选项卡的实现效果  # 微信小程序开发之选项卡(窗口底部TabBar)页面切换  # 微信小程序 tabs选项卡效果的实现  # 微信小程序实战之顶部导航栏(选项卡)(1)  # 微信小程序实现顶部选项卡(swiper)  # 微信小程序自定义组件实现tabs选项卡功能  # 微信小程序实现选项卡的简单实例  # 微信小程序实现选项卡的方法  # 希望能  # 谢谢大家  # style  # winHeight  # height  # duration  # bindtap  # current  # box  # swichNav  # width  # bottom  # border  # wxss  # px  # bindChange 

相关文章： 如何快速搭建支持数据库操作的智能建站平台？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  如何基于PHP生成高效IDC网络公司建站源码？  大同网页,大同瑞慈医院官网？  h5在线制作网站电脑版下载,h5网页制作软件？  南京网站制作费用,南京远驱官方网站？  建站主机无法访问？如何排查域名与服务器问题  如何在阿里云虚拟服务器快速搭建网站？  建站之星安全性能如何？防护体系能否抵御黑客入侵？  西安大型网站制作公司,西安招聘网站最好的是哪个？  如何使用Golang table-driven基准测试_多组数据测量函数效率  视频网站app制作软件,有什么好的视频聊天网站或者软件？  网站制作培训多少钱一个月,网站优化seo培训课程有哪些？  寿县云建站：智能SEO优化与多行业模板快速上线指南  如何用虚拟主机快速搭建网站？详细步骤解析  建站之星logo尺寸如何设置最合适？  PHP正则匹配日期和时间(时间戳转换)的实例代码  网站制作网站,深圳做网站哪家比较好？  如何在IIS中配置站点IP、端口及主机头？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  实例解析Array和String方法  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  个人摄影网站制作流程,摄影爱好者都去什么网站？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  动图在线制作网站有哪些,滑动动图图集怎么做？  太平洋网站制作公司,网络用语太平洋是什么意思？  宁波自助建站系统如何快速打造专业企业网站？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  深圳网站制作培训,深圳哪些招聘网站比较好？  深圳网站制作的公司有哪些,dido官方网站？  如何快速搭建安全的FTP站点？  如何在香港服务器上快速搭建免备案网站？  建站之星后台密码遗忘？如何快速找回？  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  建站与域名管理如何高效结合？  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  如何制作网站标识牌,动态网站如何制作（教程）？  如何通过wdcp面板快速创建网站？  如何快速搭建二级域名独立网站？  建站主机系统SEO优化与智能配置核心关键词操作指南  C#如何序列化对象为XML XmlSerializer用法  如何确认建站备案号应放置的具体位置？  如何设计高效校园网站？  上海网站制作开发公司,上海买房比较好的网站有哪些？  如何解决ASP生成WAP建站中文乱码问题？  建站之星会员如何解锁更多建站功能？