当前位置: 代码网 > 移动>腾讯>微信 > 微信小程序开发底部导航

微信小程序开发底部导航

2025年03月30日 微信 我要评论
微信小程序开发简介:一套软件的应用架构包括数据层、业务逻辑层、服务层、控制层、展示层、用户等多个层次。主配置文件app.json:主配置文件app.json位于项目主目录中,用来对当前项目进行全局配置

微信小程序开发

简介:

一套软件的应用架构包括数据层、业务逻辑层、服务层、控制层、展示层、用户等多个层次。

主配置文件app.json:

主配置文件app.json位于项目主目录中,用来对当前项目进行全局配置。

代码示例如下:

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundcolor": "#f6f6f6",
    "backgroundtextstyle": "light",
    "navigationbarbackgroundcolor": "#f6f6f6",
    "navigationbartitletext": "我的第一个小程序",
    "navigationbartextstyle": "black"
  }
}
登录后复制

上面代码中有两个页面,这是一个json对象,其中的属性pages用来定义小程序的页面,上面代码中表示有两个页面,一个名为”index”,位于“pages/index”下,另一个名为new,位于“page/new”下。

位于pages数组中的第一项表示小程序的初始页面,即启动小程序时将运行显示的页面。如果继续添加页面可以往pages数组中添加即可。

配置状态:

backgroundcolor:用来设置窗口的背景色,与html中的颜色设置相同,使用十六进制的rgb方式设置颜色。默认为白色。

backgroundtextstyle:用来设置下拉背景字体、loading图的样式,有“dark”、“light”这两个值。

enablepulldownrefresh:用来设置是否开启下拉刷新,默认false。

navigationbarbackgroundcolor:用来设置导航栏背景颜色。

navigationbartextstyle:设置导航栏标题颜色。

navigationbartitletext:设置导航栏标题的文字内容。

配置底部导航:

"tabbar": {
    "list": [
      {
      "pagepath": "pages/index/index",
      "text": "首页",
      "iconpath": "images/icon_home.png",
      "selectediconpath": "images/icon_homeed.png",
      "lang":"pagepath显示的页面,text文本,iconpath未激活的图标,selectediconpath激活的图标"
    }, 
    {
      "pagepath": "pages/new/new",
      "text": "广场",
      "iconpath": "images/icon_guangchang.png",
      "selectediconpath": "images/icon_guangchanged.png",
      "lang":"pagepath显示的页面,text文本,iconpath未激活的图标,selectediconpath激活的图标"
    },
    {
      "pagepath": "pages/userconsole/userconsole",
      "text": "设置",
      "iconpath": "images/icon_set.png",
      "selectediconpath": "images/icon_seted.png",
      "lang":"pagepath显示的页面,text文本,iconpath未激活的图标,selectediconpath激活的图标"
    }]
  }
登录后复制

tabbar为底部导航,上面的代码中有三个底部导航

color:设置tab未激活状态的文字颜色。

selectedcolor:设置tab激活状态的文字颜色。

borderstyle:设置底部导航边框。

backgroundcolor:设置底部导航背景颜色。

list:这是一个数,设置底部导航个数,最少2个,最多5个。

text:设置导航文字。

pagepath显示的页面,text文本,iconpath未激活的图标,selectediconpath激活的图标。

以上就是微信小程序开发底部导航的详细内容,更多请关注代码网其它相关文章!

(0)

相关文章:

  • 微信小程序WXML模板语法总结

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于wxml模板语法的相关内容,包括了数据绑定、事件绑定、条件渲染、列表渲染等等问题,下面一起来看一下,希望对大家有帮助…

    2025年03月30日 腾讯
  • 实现微信发布文章信息采集

    实现微信发布文章信息采集

    最近有一个客户,需要实现这样一个功能,之前他们在微信公众平台发布文章信息后,还需要在官网再发布一次,这样等于是同样的工作做了两遍,他们想实现在微信公众平台发布文... [阅读全文]
  • 微信小程序视图层详解

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于视图层的相关问题,视图层负责将逻辑层的数据显示在页面上,同时将视图层的事件发送给逻辑层,下面一起来看一下,希望对大家…

    2025年03月30日 腾讯
  • 手把手教你在微信小程序中使用canvas绘制天气折线图(附代码)

    手把手教你在微信小程序中使用canvas绘制天气折线图(附代码)

    微信小程序中如何绘制天气折线图?下面本篇文章就来给大家介绍一下在微信小程序中使用canvas绘制天气折线图的方法,以及使用三阶贝塞尔曲线拟合温度点,使之变得圆滑... [阅读全文]
  • 微信小程序之页面路由知识点总结

    微信小程序之页面路由知识点总结

    本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一... [阅读全文]
  • 小程序中rpx和px有什么区别

    小程序中rpx和px有什么区别

    区别:1、rpx是相对长度单位,而px是固定长度单位;2、rpx可以自适应手机分辨率,适配当前机型,而px不能很好的适应不同分辨率的手机。本教程操作环境:har... [阅读全文]

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com