All Projects → Aracy → wx-mini-navigationbar

Aracy / wx-mini-navigationbar

Licence: other
微信小程序自定义标题栏

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to wx-mini-navigationbar

dangann radar
https://dangann.com 单干小雷达:与自由工作者分享适合办公的地点
Stars: ✭ 12 (-40%)
Mutual labels:  wechat-mini-program
taro3-vue3-template
一个基于 Taro3 和 Vue3 框架微信小程序模版。 核心技术采用Taro3、Vue3、TypeScript、NutUi、Vux4/Pinia、VueUse
Stars: ✭ 115 (+475%)
Mutual labels:  wechat-mini-program
fish
Pixi.js 开发微信小游戏示例
Stars: ✭ 37 (+85%)
Mutual labels:  wechat-mini-program
mini-programm-template
基于原生微信小程序的一般般好用的模板
Stars: ✭ 35 (+75%)
Mutual labels:  wechat-mini-program
Course-table
微信小程序,课程表最佳实践案例。
Stars: ✭ 15 (-25%)
Mutual labels:  wechat-mini-program
weapp-poem
诗词墨客 - 最全中华古诗词小程序
Stars: ✭ 409 (+1945%)
Mutual labels:  wechat-mini-program
library-mini-program
基于小程序云开发的图书管理小程序
Stars: ✭ 44 (+120%)
Mutual labels:  wechat-mini-program
CHCharts-wechat
📈A charts component for WeChat mini-app development(一款用于微信小程序开发中的图表组件,使用者可以快速添加并集成到微信小程序开发中).
Stars: ✭ 71 (+255%)
Mutual labels:  wechat-mini-program
natsuha-weather
Natsuha Weather for WeChat Mini Program.
Stars: ✭ 33 (+65%)
Mutual labels:  wechat-mini-program
react-native-floating-action-bar
A React Native floating action bar.
Stars: ✭ 39 (+95%)
Mutual labels:  navigationbar
cxjslite
程序集市lite版,使用wordpress作为后台生成微信小程序,可用于博客、资讯、自媒体小程序。
Stars: ✭ 17 (-15%)
Mutual labels:  wechat-mini-program
WXNavigationBar
Handle UINavigationBar like WeChat. Simple and easy to use.
Stars: ✭ 116 (+480%)
Mutual labels:  navigationbar
wechat
A small program canvas countdown project
Stars: ✭ 26 (+30%)
Mutual labels:  wechat-mini-program
Dailyfresh-B2C
这是一个 ☛全栈/全端/全平台☚ 的B2C模式的电商项目, web后台基于Django2.0 + Python3.6, 前后端分离,前端使用Vue框架开发。移动端基于Flutter开发,一套代码支持Android&IOS平台。微信小程序基于mpvue框架开发。
Stars: ✭ 74 (+270%)
Mutual labels:  wechat-mini-program
elf-taro
Taro 小程序 脚手架 (Taro 3 + Dva + Typescript + Immer) - 内置 Redux 计数器, 异步数据请求 与 腾讯小程序地图 demo
Stars: ✭ 61 (+205%)
Mutual labels:  wechat-mini-program
PopRun
跑鸭:这是我的毕业设计,“跑鸭”微信小程序-一款基于校园跑步的社交小程序(实时里程配速、运动路径、整公里提醒、周榜月榜、打卡分享、热门推荐、线上活动、勋章墙、隐私设置),技术栈:Vant-Weapp UI、Laravel+MySQL
Stars: ✭ 64 (+220%)
Mutual labels:  wechat-mini-program
LLNavigationController
This is a subClass Of UINavigationController.本导航条继承UINavigationController,自定义滑动返回手势与滑动动画,同时可自定义过场动画,解决了手势共存时的冲突。在系统类的基础上进行扩展,节约性能,无任何代码耦合度,可随时集成与剥离。支持iOS7以上系统,兼容iOS11,版本稳定。
Stars: ✭ 20 (+0%)
Mutual labels:  navigationbar
wechat-scroll-linkage
微信小程序列表左右联动效果
Stars: ✭ 26 (+30%)
Mutual labels:  wechat-mini-program
edu
微信小程序编写的移动互联网教育平台
Stars: ✭ 41 (+105%)
Mutual labels:  wechat-mini-program
uniapp-scaffold
基于Vue.js的跨平台小程序脚手架、设计语言、组件库及插拔式模板
Stars: ✭ 87 (+335%)
Mutual labels:  wechat-mini-program

wx-mini-navigationbar

小程序自定义标题栏组件,支持设置背景图片,以及背景图片的显示mode,允许在左侧添加一个按钮,适配了Android方便微信的标题靠左显示

使用效果

IOS无返回

IOS有返回

Android无返回

Android有返回

使用方法

属性介绍

属性名 类型 默认值 是否必须 说明
menuSrc String '' 按钮图片地址
bgImgSrc String '' 背景图片地址
bgImgMode String aspectFill 背景图片的显示模式
title String '' 标题
titleCenter Boolean false 标题是否居中(这个只对Android机型有效)
titleTextColor String '' 字体和按钮以及loading图标的颜色,按钮和loading暂时只有黑白2色
backgroundColor String '' 整个标题栏的背景颜色
loading Boolean false 是否是加载状态
backProxy Boolean false 是否重写了返回键

标题栏中属性的默认数据会自动获取json配置以及系统的默认数据,如果不需要动态更改样式,可以在json中设置,组件中同样起作用

事件介绍

属性名 detail
NaviBack 返回的逻辑方法
MenuTap 按钮的点击事件
"usingComponents": {
    "toolBar": "/component/toolbar"
},
<toolBar menuSrc='/image/menu_white.png' bindMenuTap='onMenuTap' bgImgSrc='/image/navi-bg.jpg' />

高度说明: 为了方便适配,这里给出自定义标题栏的计算公式: const MenuRect = wx.getMenuButtonBoundingClientRect() const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; const height = (MenuRect.top - statusBarHeight) * 2 + MenuRect.height +MenuRect.top

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].