微信小程序自定义导航栏 navigation bar 返回键 首页
2018-11-02 10:49
1351 查看
微信小程序自定义导航栏(wx_custom_navigation_bar)
自定义返回键、首页键,动态设置标题,响应式组件
版本号:1.0.0
作者:chen-yt
github: https://github.com/chen-yt/wx_custom_navigation_bar
截图
代码
navbar组件
- navbar.wxml
<view class="navbar" style="{{'height: ' + navigationBarHeight}}"> <view style="{{'height: ' + statusBarHeight}}"></view> <view class='title-container'> <view class='capsule' wx:if="{{ back || home }}"> <view bindtap='back' wx:if="{{back}}"> <image src='img/back.svg'></image> </view> <view bindtap='backHome' wx:if="{{home}}"> <image src='img/home.svg'></image> </view> </view> <view class='title'>{{text}}</view> </view> </view>
- navbar.wxss
.navbar { width: 100vw; background-color: #2f2f2f; position: fixed; z-index: 4; } .title-container { height: 44px; display: flex; align-items: center; position: relative; } .capsule { margin-left: 10px; height: 32px; border: 1px solid #777; border-radius: 16px; display: flex; align-items: center; } .capsule > view { width: 32px; height: 60%; position: relative; } .capsule > view:nth-child(2) { border-left: 1px solid #777; } .capsule image { width: 60%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .title { color: white; position: absolute; left: 104px; right: 104px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
- navbar.js
const app = getApp() Component({ properties: { text: { type: String, value: 'Wechat' }, back: { type: Boolean, value: false }, home: { type: Boolean, value: false } }, data: { statusBarHeight: app.statusBarHeight + 'px', navigationBarHeight: (app.statusBarHeight + 44) + 'px' }, methods: { backHome: function () { wx.reLaunch({ url: '../index/index', }) }, back: function () { wx.navigateBack({ delta: 1 }) } } })
- navbar.json
{ "component": true }阅读更多
相关文章推荐
- 微信小程序之分享页面如何返回首页
- 微信小程序系列十:自定义底部导航
- 点击一个textView里的link导航至程序内可返回的自定义webView
- 微信小程序之分享页面如何返回首页的示例
- 微信小程序-隐藏和显示自定义的导航
- 微信小程序 某个页面直接返回首页(微信小程序回退到首页)
- (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航
- 点击一个textView里的link导航至程序内可返回的自定义webView
- 微信小程序自定义导航隐藏和显示功能
- 微信小程序 自定义 swiper 样式
- 微信小程序四(设置底部导航)
- Swift- 自定义导航栏背景、标题和返回按钮属性
- 第三弹:微信小程序开发思考总结—“文章阅读器和电影信息”项目实践---阅读首页、阅读详情开发
- 微信小程序的分享页图片如何自定义呢?
- 微信小程序自定义组件封装及父子间组件传值的方法
- 微信小程序之——自定义分享按钮(完整版)
- 微信小程序—tabBar底部导航中文注解api
- 2017年11月8日最新仿互站导航t5友价商城-9套模板首页都增加微信登陆
- 微信小程序自定义Toast
- 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例