微信小程序如何实现自定义tabBar
小程序开发现在非常火,但是对于后台来说如何做到自定义tabBar呢?下面就来讲解下,如何实现微信小程序登录后根据用户身份权限不同跳转到不同的页面问题。首先需要解决的是:你要把底部导航做成一个公共模板template。
wxml中代码:<template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.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="redirect" class="{{item.clas}}" style="{{item.active? ‘color: ‘+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ‘‘}}"> <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image> <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image> <text class=‘tabbar_text‘>{{item.text}}</text> </navigator> </block> <view class="clear"></view> </view> </template> 因为它要全局调用我就把样式写在 App.wxss中 .menu-item{ width: 32%; float: left; text-align: center; padding-top: 8px; } .menu-item2{ width: 24%; float: left; text-align: center; padding-top: 8px; } .img{ width: 30rpx; height: 30rpx; display: block; margin:auto; } .clear{ clear: both; } .tab-bar{ position: fixed; width: 100%; padding: 0px 2%; } .tabbar_text{ font-size: 28rpx } app.js中代码如下: }, 初步工作准备完毕,接下来就是要去调用这个模板了,首先要在需要添加tabBar的wxml页面中添加,接下来就是js中,这样就设置完毕了,相信现在大家都知道如何来实现了,如果还存在疑问的话,大家可以、留言,来共同讨论学习。 本文由专业的郑州app开发公司燚轩科技整理发布,如需转载请注明出处。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |