微信小程序开发实现的选项卡(窗口顶部/底部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字符串函数扩展代码
Sep 13 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php学习之 数组声明
2011/06/09 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php判断访问IP的方法
2015/06/19 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
详解K-means算法在Python中的实现
2017/12/05 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python能做什么
2020/06/02 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python selenium xpath定位操作
2020/09/01 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
高级Java程序员面试题
2016/06/23 面试题
关于逃课的检讨书
2014/01/23 职场文书
三年级学生评语
2014/04/23 职场文书
跳蚤市场口号
2014/06/13 职场文书
法人授权委托书样本
2014/09/19 职场文书
补充协议书
2015/01/28 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书