• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序开发指南:关于Tab分页

微信小程序开发指南:关于Tab分页

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了微信小程序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
1.1 组件 tabBar

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

微信小程序开发指南:关于Tab分页

微信小程序提供了一个组件tabBar用来实现多tab分页功能。如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。


1.2 配置位置

   "tabBar": {
    "color": "#a9a9a9",
    "selectedColor": "#1f1f1f",
    "backgroundColor": "#fefefe",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/main/main",
        "text": "首页",
        "iconPath": "image/icon_home.png",
        "selectedIconPath": "image/icon_home_select.png"
      },
      {
        "pagePath": "pages/aboutUs/aboutUs",
        "text": "关于我们",
        "iconPath": "image/icon_person.png",
        "selectedIconPath": "image/icon_person_select.png"
      }
    ] }

1.3 icon图标
对于每一个tab的icon,需要放置于本地工程内,经测试此处不支持网络图片。需在工程根目录下创建用于存放图片的文件夹,文件名随意,使用时需指定其相对路径。(作者实际操作过程中,没有在IDE中找到在image文件夹中放入图片文件的方法,我是在本地文件中操作的,不知道是功能太隐蔽还是我没有找到,如果有知道的望留言告知)

微信小程序开发指南:关于Tab分页

  {
        "pagePath": "pages/main/main",
        "text": "首页",
        "iconPath": "image/icon_home.png",
        "selectedIconPath": "image/icon_home_select.png"
      }

更多微信小程序开发指南:关于Tab分页相关文章请关注微课江湖!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2018-11-30微信小程序功能实现:上滑加载下拉刷新
  • 2018-11-30微信小程序的动画效果详解
  • 2018-11-30小程序开发--wx.request异步封装实例教程
  • 2018-11-30ES6新特性开发微信小程序(8)
  • 2018-11-30微信小程序 应用生命周期详解
  • 2018-11-30微信小程序实现密码输入的实例
  • 2018-11-23微信小程序云开发服务端数据库API 获取数据库的引用
  • 2017-06-20微信小程序游戏2048demo代码
  • 2018-11-30关于微信小程序中图片处理的问题总结
  • 2018-11-23微信小程序云开发服务端数据库API 地理位置构造器

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序实战开发之小程序基本目录结构讲解
    • 微信小程序图片选择区域实现裁剪功能方法教程
    • 微信小程序开发聊天会话组件:可以用于在线客服的聊天对话
    • 微信小程序开发系列(三)APP的生命周期的详解
    • 微信小程序中app.json配置的代码解析
    • 小程序开发之计算器
    • 微信小程序如何使用webview调用微信扫一扫的功能
    • 微信小程序云开发API 指定返回结果中记录需返回的字段
    • 详解二维码登录的原理
    • 微信小程序开发一键登录 获取session_key和openid的实现

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有