小程序-导航

现在每个小程序的底部基本都会有一个像这样的导航

1、需要准备图标(可以去图标库里去下载)

准备选中和没选中时的2种颜色的图标

2、因为是进行全局配置,所以需要在全局的app.js文件中进行设置

  "tabBar": {
    "color":"#a9b7b7",
    "selectedColor":"red",
    "list": [
      {
        "selectedIconPath":"pages/images/movie1.png",
        "iconPath":"pages/images/movie.png",
        "pagePath": "pages/index/index",
        "text": "电影"
      },
      {
        "selectedIconPath":"pages/images/yy1.png",
        "iconPath":"pages/images/yy.png",
        "pagePath": "pages/cinema/cinema",
        "text": "影院"
      },{
        "selectedIconPath":"pages/images/yh1.png",
        "iconPath":"pages/images/yh.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },

3、tabBar的属性有color,selectedColor,backgroundColor,borderStyle(只接受black/white),list(接受pagePath(页面路径,必须在 pages 中先定义),text,iconPath,selectedIconPath)四个参数,position(默认bottom,设置top则为上面导航)

时间: 2024-12-28 13:21:47

小程序-导航的相关文章

微信公众平台-杂项:小程序导航

ylbtech-微信公众平台-杂项:小程序导航 1.返回顶部 1. 小程序导航 微导航 http://www.we123.com/xcx/ 91udhttp://www.91ud.com/app/ 微信主页 http://www.weixinzhuye.com/app.html 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 1. 公众号导航 微小宝 https://data.wxb.com/rank 爱妮微 http://www.anyv.net/ 聚微信 http

微信小程序导航:官方工具+精品教程+DEMO集合+最新资讯

10月15日更新: 官方手册在线版及本地版 W3C微信小程序使用手册:http://www.w3cschool.cn/weixinapp/wgt21q8k.html微信小程序官方开发文档chm版下载 :http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=44微信小程序开发帮助手册:http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=45 10月14日更新: 免费视频集合: 微信小

小程序导航的应用

<navigator url="/pages/rich/rich" open-type="navigate">导航1 有回退按钮</navigator>//不能和tabbar设置的路径一样 <navigator url="/pages/share/share" open-type="redirect">导航1 没有回退按钮 很少用</navigator>//不能和tabbar设置

微信小程序导航键设置

<utils >文件夹下app.json插入代码 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "

微信小程序-导航

wxml <view class="content"> <view class="loginTitle" style='height:80rpx'> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">登录</view> <view

微信小程序 导航tab切换,跟随滚动置顶

<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con"> <scroll-view scroll-x="true" scroll-left="{{scrollLeft}}"> <view class="small_nav_scroll"> <view class="{{id==

微信小程序的页面跳转==编程式导航传参 和 标签的方法传参

小程序导航传参接收传递过来的参数 在onload中 实例 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/11414768.html

微信小程序常见问题集合(长期更新)

程序问题: 森哥解答:1.找不到所要替换的文件  问题原因:开发工具版本不正确,老版本不支持 解决方案:确保下载的程序版本在0.9.092100以上  2.Failed to load resource: net::ERR_NAME_NOT_RESOLVEDhttp://1709827360.appservice.open.weixin.qq.com/appservice  问题原因:通常是由于系统设置了代理如Shadowsocks等. 解决方案:关闭代理,或者依次点击工具栏"动作"-

微信小程序设计规范

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议.以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号.高效.一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢. 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序哎设计时应该注意减少无关的设计元素对用户目标干扰,礼貌地向用户展示程序侧提供的服务,友好地引导用户进行操作. 1. 重点突出 每个页面都应有明确的重点,以便于用户每进入一个新