微信小程序导航栏怎么写

微信小程序写到到导航栏还是非常简单得，就算没有三大框架的基础，也是非常容易理解`的。
接下来我们看看他是如何操作的：
以电商页面中常见的导航为例，会了这一种，就是会了很多种，到时根据具体需求改动即可：

以上实现了选中哪一项，显示那一项的内容，同时被选中的哪一项样式也发生变化
具体怎么做呢？
首先，创建一个放logo的文件夹，家需要的图片放在文件夹里面，每个选项靓照图片，分别为选中状态和费选中状态
然后，在app.json里面的全局配置"pages"里面配置文件的目录

"pages": ["pages/index/index","pages/shopping/shopping","pages/classify/classify","pages/mine/mine"]

配置完文件目录以后会在pages文件夹下面出现四个相应的文件夹，如图
第三步，在app.json里添加全局配置"tabBar"（和pages同级），然后写入以下代码

"tabBar":{
"color": "#333",
"selectedColor": "#FFA500",
"list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"logos/tab_home_nor.png","selectedIconPath":"logos/tab_home_hig.png"},{"pagePath":"pages/shopping/shopping","text":"购物车","iconPath":"logos/tab_shopping_nor.png","selectedIconPath":"logos/tab_shopping_hig.png"},{"pagePath":"pages/classify/classify","text":"分类","iconPath":"logos/tab_menu_nor.png","selectedIconPath":"logos/tab_menu_hig.png"},{"pagePath":"pages/mine/mine","text":"我的","iconPath":"logos/tab_me_nor.png","selectedIconPath":"logos/tab_me_hig.png"}
]

}
每行代码代表的意义

到这里我们就完成了开头看到的页面啦，是不是还是很简单呢？

微信小程序导航栏怎么写相关推荐

微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序导航栏制作
导航栏制作微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载导航栏透明渐变效果实现原理利用position:absolute在导航下定位一个v ...
微信小程序----导航栏透明渐变二（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 导航栏透明渐变效果实现原理给page-group设置的背景颜色采用rgba; 通过改变rgba其 ...
定位微信小程序导航栏
定位微信小程序,首先做一个关于头部的组件, 主要是让这个组件的位置固定这里需要使用到css的 fixed定位和z-index的属性下面展示一些内联代码片. // A code block var ...
rax自定义微信小程序导航栏
一.导航栏样式背景: 接到一个需求,需要自定义微信导航栏,并且展示如上图存在各种样式: 难点: 兼容IOS刘海屏,IOS药丸屏,安卓无框屏.H5正常屏幕.小程序退出后台不随页面滚动: navigat ...

微信小程序导航栏怎么写

微信小程序导航栏怎么写相关推荐

最新文章

热门文章