html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...

https://blog.csdn.net/small_lack/article/details/80959278

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本(用户版、商家版)，并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面(index，logs)显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbar.wxml

在app.json中无需定义“tabBar”

在app.js中自定义如下

//app.js

App({

onLaunch: function () {

//第一种底部

editTabBar: function () {

//使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。

var curPageArr =

getCurrentPages();

//获取加载的页面

var curPage =

curPageArr[curPageArr.length - 1];

//获取当前页面的对象

var pagePath =

curPage.route;

//当前页面url

(pagePath.indexOf('/') != 0) {

pagePath =

html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...相关推荐

（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
微信小程序云开发（2）——在页面显示云数据库的数据
微信小程序云数据库的查询可以参考"微信小程序云开发(1)" 在页面显示数据库里的数据在"pages/index/index.wxml"文件中输入以下代码: & ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义底部栏凸起效果+自定义扫码详细介绍
项目结构: 主页面图: 扫码界面: 使用步骤如下: - **第一步**:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替 ...
微信小程序自定义的导航栏
目录项目场景效果图解决方案具体的代码 wxml wxss 素材库题外话项目场景一个小程序可以拥有用户端和审批端,但微信原生小程序规定只能有一个tabar在小程序中,但是一旦是多端口的小程 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...

html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...

html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...相关推荐

最新文章

热门文章