微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解


Posted in Javascript onMay 14, 2019

本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能。分享给大家供大家参考,具体如下:

微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

再上代码:

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <!-- 我是哈哈 -->
  <swiper-item>
   <view>我是哈哈</view>
  </swiper-item>
  <!-- 我是呵呵 -->
  <swiper-item>
   <view>我是呵呵</view>
  </swiper-item>
  <!-- 我是嘿嘿 -->
  <swiper-item>
   <view>我是嘿嘿</view>
  </swiper-item>
</swiper>

2.index.wxss

/**index.wxss**/
.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #777777;
  text-align: center;
  line-height: 80rpx;}
.swiper-tab-list{ font-size: 30rpx;
  display: inline-block;
  width: 33.33%;
  color: #777777;
}
.on{ color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
  text-align: center;
}

3.index.js

//index.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
    });
   }
  });
 },
 /**
   * 滑动切换tab
   */
 bindChange: function( e ) {
  var that = this;
  that.setData( { currentTab: e.detail.current });
 },
 /**
  * 点击tab切换
  */
 swichNav: function( e ) {
  var that = this;
  if( this.data.currentTab === e.target.dataset.current ) {
   return false;
  } else {
   that.setData( {
    currentTab: e.target.dataset.current
   })
  }
 }
})

之前没有上传代码.这是下图的代码

demo源码点击此处本站下载

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

这样一个类似viewpage的顶部选项卡就出来了.

微信小程序开发中窗口底部tab栏切换页面很简单很方便.

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

代码:

1.app.json

//app.json
{
 "pages":[
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#999999",
  "navigationBarTitleText": "tab",
  "navigationBarTextStyle":"white"
 },
  "tabBar": {
  "color": "#ccc",
  "selectedColor": "#35495e",
  "borderStyle": "white",
  "backgroundColor": "#f9f9f9",
  "list": [
   {
    "text": "首页",
    "pagePath": "pages/index/index",
    "iconPath": "images/home.png",
    "selectedIconPath": "images/home-actived.png"
   },
   {
    "text": "目录",
    "pagePath": "pages/catalogue/catalogue",
    "iconPath": "images/note.png",
    "selectedIconPath": "images/note-actived.png"
   },
   {
    "text": "我的",
    "pagePath": "pages/mine/mine",
    "iconPath": "images/profile.png",
    "selectedIconPath": "images/profile-actived.png"
   }
  ]
 }
}

pagePath是页面路径.iconPath是图片路径,icon 大小限制为40kb.
selectedIconPath:选中时的图片路径,icon 大小限制为40kb

tab Bar的最多5个,最少2个.

在pages目录下写好页面即可切换.

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
详解jenkins自动化部署vue
May 14 #Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 #Javascript
JavaScript如何实现元素全排列实例代码
May 14 #Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 #Javascript
js中arguments对象的深入理解
May 14 #Javascript
ios中视频的最后一桢问题解决
May 14 #Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 #Javascript
You might like
php 中include()与require()的对比
2006/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
解放web程序员的输入验证
2006/10/06 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python递归函数实例讲解
2019/02/27 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
庆中秋节主题活动方案
2014/02/03 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
校长一岗双责责任书
2015/05/09 职场文书
道歉情书大全
2015/05/12 职场文书
公诉意见书范文
2015/06/05 职场文书
煤矿隐患排查制度
2015/08/05 职场文书