html导航栏代码跳转,微信小程序自定义底部导航栏tabBar(含跳转页面wx.navigateTo)...
一.app.json配置
这里配置
{"pages": ["pages/usersLists/usersLists","pages/addMember/addMember","pages/mine/mine"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F1F1F1","navigationBarTitleText": "test","navigationBarTextStyle": "black"},"tabBar": {"custom": true,"color": "#535353","selectedColor": "#000000","backgroundColor": "#ffffff","list": [
{"pagePath": "pages/usersLists/usersLists","text": "用户"},
{"pagePath": "pages/mine/mine","text": "个人"}
]
},"usingComponents": {"header": "components/header/header","add-icon": "components/add-icon/add-icon"},"sitemapLocation": "sitemap.json"}
二.自定义tabBar
**官方示例标签是cover-view来确保tabbar的层级,但是我这里要用到iconfont,遗憾的是cover-view不支持iconfont,所以我这里用的普通的view。如果iconfont不是必须的,换成cover-view更好。
//custom-tab-bar/custom-tab-bar.js
Component({/**
* 组件的属性列表*/properties: {
},/**
* 组件的初始数据*/data: {
selected:0,
color:"#535353",
selectedColor:"rgb(131,175,155)",
list: [{
pagePath:"/pages/usersLists/usersLists",
iconPath:"iconyonghu"}, {
pagePath:"/pages/mine/mine",
iconPath:"icongerenzhongxinxuanzhong"}]
},/**
* 组件的方法列表*/methods: {
changeTab(e) {
let { index, url}=e.currentTarget.dataset;
let { selected }= this.data;if (selected === index) return;
wx.switchTab({
url
})this.setData({ selected: index })
}
}
})
/*custom-tab-bar/custom-tab-bar.wxss*/@import "../style/iconfont.wxss";
.tab-bar{height:150rpx;background-color:#ffffff;display:flex;align-items:center;justify-content:space-between;
}.tab-icon{display:flex;align-items:center;justify-content:center;width:33.33%;height:100%;font-size:70rpx;color:#535353;
}.active{color:rgb(131,175,155);
}
2.在tabbar页面onShow部分加入如下代码
//miniprogram/pages/usersLists/usersLists.js
onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({
selected:0 //数字是当前页面在tabbar的索引
})
}
}
// miniprogram/pages/mine/mine.js
onShow: function() {if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({
selected:1 //数字是当前页面在tabbar的索引})
}
}
可以看到我这里有两个tabbar页面:usersLists和mine。有时候我们会遇到这样一个设计:点击tabbar中的按钮打开一个page(发生页面跳转),按照官方的例子是做不到的。在custom-tab-bar/index中是无法wx.navigateTo跳转的,只能switchTab,比如我在tabbar中间要加一个icon,用来跳转到addMember页面,此时不能加到custom-tab-bar/index中,因此,我们得写一个组件,放在每个tabbar页面中,然后通过样式调整,覆盖在tabbar上。
3.新建覆盖在tabbar上的icon组件:add-icon
/*components/add-icon/add-icon.wxss*/@import "../../style/iconfont.wxss";
.add-icon{flex:1;height:100%;display:flex;align-items:center;justify-content:center;font-size:70rpx;color:#535353;
}.active{color:rgb(131,175,155);
}
//components/add-icon/add-icon.js
Component({/**
* 组件的属性列表*/properties: {
},/**
* 组件的初始数据*/data: {
},/**
* 组件的方法列表*/methods: {
goAddPage(){
wx.hideTabBar();
wx.navigateTo({
url:'/pages/addMember/addMember',
})
}
}
})
附app.wxss
/**app.wxss**/@import "style/iconfont.wxss";
.false-tab-icon{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;z-index:99999;width:33.33%;height:150rpx;
}page{height:100%;
}.container{height:100%;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
}button{background:initial;
}button:focus{outline:0;
}button::after{border:none;
}.artic{width:100%;flex:1;background-color:#f4f4f4;
}.my-head{width:100%;
}.page-title{width:100%;margin-top:18rpx;text-align:center;font-weight:500;font-size:32rpx;
}
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar(含跳转页面wx.navigateTo)...相关推荐
- 微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序自定义底部导航栏遮挡页面内容(已解决)
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
- 你会微信小程序自定义底部导航栏吗?
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
- 微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能 解决方案 uni-app 微信原生代码 在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮( ̄﹏ ̄)╭⭐. 解决方案 在导航 ...
- (转载)微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏 微信小程序自定义头部导航栏 先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
- 微信小程序 自定义顶部导航栏标题 navigationStyle
微信小程序 自定义顶部导航栏标题 单页面自定义导航栏 修改需要自定义的页面,的页面配置.json文件 全部页面自定义导航 修改公共页面配置app.json 单页面自定义导航栏 修改需要自定义的页面,的 ...
- html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
- 微信小程序 实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
- 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
最新文章
- mysql 判度数据库存在,问题出在什么地方啊?
- 通过属性值从对象数组中获取JavaScript对象[重复]
- python 类装饰器 __set___python装饰器代替set get方法实例
- Android设置ProgressBar的前景和背景及其在多线程中的刷新
- 微信小程序学习笔记(七)
- leetcode 121 python(动态规划)
- gradle生成java文件_使用Gradle for Java插件生成Java类
- ps2019布尔运算快捷键_设计师不会告诉你的ps布尔运算,你学会了吗?
- 【HDOJ6955】Xor sum(异或前缀和,01字典树)
- optenstack配置keystone
- oracle批量文件入库,C++ Oracle批量高效入库
- java学生成绩管理系统源码(java学生信息管理 java成绩管理系统 java学生信息管理系统)
- KaTeX|LaTeX数学公式编辑手册
- LNK1169 LNK2005错误
- python股票回测_用Python徒手撸一个股票回测框架搭建【推荐】
- 中国首个数字化糖尿病逆转项目在宁波正式启动
- 信息收集之通过JS拓展信息面
- 【转】在线网页取色器
- Java 控制反转和依赖注入模式【翻译】【整理】
- linux(centos7)内核升级
热门文章
- 万字长文助你上手软件领域驱动设计 DDD
- nginx监听事件流程
- nginx学习十 ngx_cycle_t 、ngx_connection_t 和ngx_listening_t
- 基于SRS的RTMP分发技术方案
- 更改idea控制台输出字体
- Spark _30_SparkStreaming算子操作Driver HA
- mybatis实现CRUD(不使用DAO)
- JVM从入门到精通(七):GC常用参数,Method Area,JVM调优案例分析
- 【MySQL distinct的使用】如果指定了 SELECT DISTINCT,那么 ORDER BY 子句中的项就必须出现在选择列表中
- netty系列之:自定义编码解码器