微信小程序开发实现的选项卡(窗口顶部/底部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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
js实现时分秒倒计时
Dec 03 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命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
详解php中 === 的使用
2016/10/24 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
对python中return和print的一些理解
2017/08/18 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python 异或加密字符串的实例
2018/10/14 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python笔试面试题小结
2019/09/07 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
翻译专业应届生求职信
2013/11/23 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
学生会任命书范本
2015/09/21 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
电频谱管理的原则是什么
2022/02/18 无线电