首页
学习
活动
专区
工具
TVP
发布

程序底部导航实现

一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。...我们先来看个我们要实现的底部导航的效果图:(三个导航图标示例,程序最多能加5个) 1....回到项目里,新建一个images文件夹,将刚刚下载好的图标放在文件夹底下备用,将上述起好名字的图标 保存到 程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了。 2....添加配置文件 我们找到项目根目录中的配置文件 app.json 加入如下配置信息(app.json文件用来对程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。)...参考文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar OK,结束,保存 编译 就可以实现程序的经典的底部导航效果了

13.9K41

程序|订单和商品导航

问题描述 随着程序的快速发展,越来越多的app都出台了程序。不再需要去下载淘宝或者京东等一些购物app来满足购物需求,而是通过程序来进行购物,这样不仅方便而且不浪费手机储存空间。...那么,在程序中如何来实现商品的订单导航的呢? 解决方案 订单导航是由很多的组件组合在一起的,按钮,图标,文字描述等。...Price设置订单的价格, button-text="提交订单"设置按钮, submit设置按钮点击事件回调, tip设置提示文案。...图 1 效果图 二、商品导航 1.在json中调用van-tab组件。...icon:设置图标类型, text:设置文字, info :设置提示数字, type:设置按钮形式。

2.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

程序----动态设置导航标题

场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题!...失败都会执行) }) ---- 开发DEMO list.wxml 在navigator标签的url设置两个参数; 一个分类ID—用于详情页面请求对应分类的详细数据; 一个分类名称—用于本次博客的主要作用,设置导航标题...—在onLoad函数opts.navName; 三元表达式判断opts.navName参数是否为空,如果为空直接设置为商铺列表,否则进行拼接; 用setNavigationBarTitle API实现导航标题的动态设置...---- Page({ onLoad(opts){ // 设置导航为对应导航 wx.setNavigationBarTitle({ title

1.6K30

程序从零开始开发步骤(三)底部导航

一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。...我们先来看个我们要实现的底部导航的效果图:(三个导航图标示例,程序最多能加5个) ? 图片.png 1....添加配置文件 我们找到项目根目录中的配置文件 app.json 加入如下配置信息(app.json文件用来对程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。)....png", "selectedIconPath":"images/48.png" } ], "position": "bottom" } } 下一章:程序从零开始开发步骤...(四)程序页面自定义分享onShareAppMessage

3K61

程序|制作标签导航

问题描述 App.json作为全局配置文件,可以设置5个功能:配置页面路径,配置窗口表现,配置标签导航,配置网络超时和配置debug模式。...其中,标签导航是众多移动App软件均会采用的一种导航方式,那么如何用程序实现这一效果呢? 解决方案 这就需要在app.json中配置tabBar属性。...taBar是一个对象,可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色,上边框颜色可以配置white、black两种颜色。...标签导航存放到list数组中,有一个标签导航就在list中配置标签导航,list中的每个对象对应一个标签导航,每个对象中可以配置标签导航的路径、导航名称、默认图标以及选中图标。 ? ?...结语 遇到整个的问题可以分步解决,先解决基础的知识,再研究整体,会使过程比较容易。 END 实习编辑 | 王楠岚 责 编 | 赵 where2go 团队

6.6K10

程序自定义导航兼容适配所有机型

目前程序已在前端占了一席之地,最近公司项目用的就是程序开发,由于功能及页面不是很多,所以直接原生开发,毕竟坑可能会少点,在开发过程中,程序自带导航和客户的设计稿导航排在一起,感觉很别扭,因此要求去掉的自带导航...,提供了这方面的api,接下来我们就实操。...这是程序官方文档截图,可以看到导航样式支持两种,默认是带导航,另外一种是自定义导航-custom,如果使用自定义导航,我们可以 全局配置 //app.json "window": { "navigationStyle...1.获取导航高度及按钮位置 提供了获取导航高度的Api和胶囊按钮位置的Api // 系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息...const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航高度 = 状态到胶囊的间距(胶囊距距离-状态高度

2.2K1110
领券