微信小程序自定义导航栏（模板化）_微信小程序导航栏样式资源-CSDN文库

微信

微信小程序

184 浏览量 2020-12-30 01:45:27 上传评论收藏 54KB PDF 举报

资源推荐

资源详情

资源评论

微信小程序自定义导航栏（模板化）微信小程序自定义导航栏（模板化）

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件，但是对于分享页有一定的bug

这次用模板化又搞了一遍优化了下Android与IOS 显示更接近微信原生的导航栏，以及修复分享页面不显示返回首页按钮

如果大家不习惯模板化的话可以针对自己的需求拿以前封装的组件化做一些修改

微信小程序自定义导航栏(组件化)

CustomNavBar.wxml

</block>

<view class="custom-navbar-con relative {{ iOS ? ' ios ' : ' android ' }}" style="height: {{ navHeight }}px; {{ needFixed ?

'position: fixed; top: 0;' : '' }}">

<view class="custom-navbar-title ios">{{ navTitle }}</view>

</block>

<view class="custom-navbar-left-menu-con clearfix" style="top: {{ navRightMenuRect.top - statusBarHeight - 1 }}px; left: {{

winWidth - navRightMenuRect.right }}px; height: {{ navRightMenuRect.height + 2 }}px;">

<view class="custom-navbar-icon-btn pull-left back" style="height: {{ navRightMenuRect.height }}px"

bindtap="customNavBarBack">

<image class="icon" src="http://222.178.203.72:19005/whst/63/=cnvmknZczbrcmzmds///download/../image/icon-nav-back.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;"

</view>

</block>

<view class="custom-navbar-icon-btn pull-left home" style="height: {{ navRightMenuRect.height }}px"

bindtap="customNavBarBackToHome">

<image class="icon" src="http://222.178.203.72:19005/whst/63/=cnvmknZczbrcmzmds///download/../image/icon-nav-home.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;"

</view>

</block>

<view class="custom-navbar-title android pull-left" style="line-height: {{ navRightMenuRect.height - 2 }}px;">{{ navTitle }}

</view>

</block>

</view>

</block>

</view>

</block>

</template>

CustomNavBar.wxss