[小程序图文教程] 教你:微信小程序中如何实现在tabbar的切换(附源码)

2017-3-23 22:38
635610
本帖最后由 TheBeauty2017 于 2017-3-24 11:12 编辑

教你小程序系列教程:
1.教你:微信小程序如何实现scroll-view隐藏滚动条
2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码)
3.教你:小程序如何使用swiper组件实现图片切换(附源码)
4.教你:微信小程序中如何设置拨打电话(附源码)
5.教你:如何打开小程序如何打开微信自带的地图(附源码)

6. 教你:如何使用小程序画布组件绘制自动缩放正方形(附源码)
7. 教你:如何使用微信小程序video组件播放视频(附源码)
8. 教你:如何使用小程序画布组件绘制一个会自动旋转正方形
9、教你:如何使用微信小程序开发一个弹窗页面(附源码)
10.教你:微信小程序中如何实现分页下拉加载?(附源码)
11.教你:微信小程序中如何实现图片的拖动效果(附源码)
12.教你:微信小程序中如何实现在tabbar的切换(附源码)
今天在学习微信小程序的tabbar的切换,所以就顺便写了一个小教程,不是很完美。这里面涉及到在非首页显示tabbar的问题,后续我会专门写一篇文章来解答这个问题。(微信小程序开发过程中tabbar页面显示的相关问题及解决办法。)今天我们还是看一下tabbar页面切换的效果图:
tabbar.gif
一如既往首页代码:
[AppleScript] 纯文本查看 复制代码
<view class="copyright">
    <view class="copyright_item">CopyRight:All Right Reserved</view>
    <view class="copyright_item">原创作者:51小程序</view>
    <view class="copyright_item">微信小程序开发者社区</view>
    <view class="copyright_item">HTML51.COM</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
</view>


关于tabbar的官方属性说明如下:
2017-03-23_222946.jpg
其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:
2017-03-23_222958.jpg

app.json的代码如下:

  • 新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图
[AppleScript] 纯文本查看 复制代码
{
  "pages": [
    "copyright/copyright",
    "pages/index/index",
    "pages/picDisplay/picDisplay"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "首页",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color":"#666666",
    "selectedColor":"#06bd04",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/indexHL.png"
    },{
      "pagePath": "pages/picDisplay/picDisplay",
      "text": "图片展示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    },{
      "pagePath": "copyright/copyright",
      "text": "演示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    }]
  }

}


tabbar页面切换的源码下载如下:
游客,如果您要查看本帖隐藏内容请回复


分享到 :
0 人收藏

10 个回复

倒序浏览
肖大神  小程序牛人 | 2017-3-24 16:29:47
底部导航栏微信确实做的不是很好,很多人都说这个问题了
韶华舞流年  小程序菜鸟 | 2017-12-15 10:22:55
首页的底部taBbar好弄,内页的tabbar如何设置呢?
清风可愿听我说  小程序菜鸟 | 2017-12-30 20:31:54
学到了,好东西
阿紫Jun  小程序菜鸟 | 2018-3-16 18:00:16
学习一下
我在长安长安  小程序菜鸟 | 2018-4-27 14:57:24
关于这个传说中的问题 我抱着瞻仰的心态前来查看
朕要  小程序菜鸟 | 2018-7-22 15:57:13
正在研究这个问题
浮生若茶  小程序菜鸟 | 2018-7-23 10:58:17
kkkkkankan
Evin阿文  小程序菜鸟 | 2018-8-15 08:21:17
最近正在学习微信小程序,谢谢分享了。
qwe_1990  小程序菜鸟 | 2019-4-2 10:59:40
学习中。。。。。。
您需要登录后才可以回帖 登录 | 朕要注册

本版积分规则

手机版|51小程序,商务合作QQ: 3352085720 ( 苏ICP备15027371号 )

Powered by Discuz! X3.2

返回顶部