在开发小程序过程中,相信有一部分人,遇到过一个问题:当使用tabBar跳转页面时,所跳转的页面下方必定有 tabBar显示,而当你需要把它隐藏时,却束手无策。话不多说,在这里给大家分享如何隐藏tabBar的方法。 方法一:自定义tabBar使用自定义tabBar,新建一个tarBar.wxml模板页,然后引用模板的页面传入数据即可,代码如下: <template name="tabBar"> <view class="flex-h" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}"> <block wx:for="{{tabBar.list}}" wx:key="pagePath"> <navigator url="{{item.pagePath}}" open-type="{{item.pageTum}}" class="menu-item" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}"></image> <image src="{{item.iconPath}}" wx:if="{{!item.active}}"></image> <text>{{item.text}}</text> </navigator> </block> </view> </template> 接下来是在index.js的配置对象: tabBar:{ "color": "#9E9E9E", "selectedColor": "#f00", "backgroundColor": "#fff", "borderStyle": "#ccc", "list":[{ "pagePath": "/pages/index/index", "text": "主页", "iconPath": "../../images/index.png", "selectedIconPath": "../../images/index_active.png", "pageTum": "redirect", "selectedColor": "#4EDF80", active: true }, { "pagePath": "/pages/tum/tum", "text": "其他", "iconPath": "../../images/pageTum.png", "pageTum": "navigate", "selectedColor": "#4EDF80", active: false }, { "pagePath": "/pages/mine/mine", "text": "我的", "iconPath": "../../images/mine.png", "selectedIconPath": "../../images/mine_active.png", "pageTum": "redirect", "selectedColor": "#4EDF80", active: false }], "position": "bottom" } } 在这里要注意的是,active表示该页面是否被选中,pageTum表示点击该页面跳转方式,‘其他’这个页面不用设置tabBar,并且它的pageTum的值是navigate,表示点击‘其他’跳转的页面就不会显示tabBar。 index.wxml引入模板: <import src="../template/tabBar.wxml" /> <template is="tabBar" data="{{tabBar: tabBar}}" /> <text>主页面</text> //显示内容 然后在mine页面也一样配置数据把active的值改为true,引入模板。效果如下: 方法二:使用中间页面跳转使用原生tabBar跳转至一级页面,再利用周期函数onShow的特性直接跳转到我们需要看到的页面,并且在返回时使用wx.swicthTab跳转至程序设计所需的一级页面。下面来看一看实现方法: 首先在app.json中设置tabBar "tabBar": { "color": "#9E9E9E", "selectedColor": "#f00", "backgroundColor": "#fff", "borderStyle": "#ccc", "list": [{ "pagePath": "pages/index/index", "text": "主页", "iconPath": "images/index.png", "selectedIconPath": "images/index_active.png" }, { "pagePath": "pages/tum/pageTum", "text": "其他", "iconPath": "images/pageTum.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "images/mine.png", "selectedIconPath": "images/mine_active.png" } ] } 在‘其他’这个页面中设置跳转页面为一个中间过渡页面pageTum,然后利用pageTum的周期函数onShow跳转至无tabBar的二级页面tum,返回时就能直接返回至主页面,代码如下: data: { num: 0, }, onLoad: function() {}, onShow: function() { this.data.num++; if (this.data.num % 2 == 0) { wx.switchTab({ url: '../index/index' }); } else { wx.navigateTo({ url: './tum' }) } } 实现效果 如果有错误或者其他的方法,希望可以指出和交流,谢谢! |
小程序tabBar跳转页面并隐藏tabBar
发布:2018-05-02 14:37浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08