# hx-navbar 适用于 uni-app 项目的头部导航组件
导航栏组件,主要用于头部导航,组件名:hx-navbar
本组件目前兼容微信小程序、H5、5+APP。
### 本组件支持模式:
1. 普通固定顶部导航
2. 透明导航
3. 透明固定顶部导航
4. 不固定普通导航
5. 背景颜色线性渐变
6. 滑动显示背景
7. 左、中、右3个插槽;可关闭左右插槽使中间插槽铺满导航,实现高度自定义的导航需求
### 使用前提
需要先安装·uniapp·官方的```uni-icons``` 图标组件,```uni-icons```官方组件下载地址:[https://ext.dcloud.net.cn/plugin?id=28](https://ext.dcloud.net.cn/plugin?id=28)
### 使用方式
页面使用需在 ``` script ``` 中引用组件
``` javascript
import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
export default {
components: {hxNavbar}
}
```
全局使用需在 ``` main.js ``` 中注册组件
``` javascript
import hxNavbar from "./components/hx-navbar/hx-navbar.vue"
Vue.component('hx-navbar',hxNavbar)
```
### 属性
#### 基本属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| back | Boolean | true | 返回上一页,(设置后,```leftIcon```属性,和```click-left```事件将失效|
| height | String | 44px | 导航栏高度(不包含状态栏高度)|
| barPlaceholder | String | auto | 导航栏占位符 显示(show),隐藏(hidden),自动(auto:如果头部为固定fixed ,则显示占位符) |
| title | String | - | 导航标题(当设置了标题,中间插槽将失效) |
| fixed | Boolean | false | 固定头部 |
| color | String | #000000 | 导航文字颜色(如果需要屏幕滑动后变色,参数则为数组,例子:`['#000000','#ffffff']`) |
| backgroundColor | Array | [255, 255, 255] | 导航背景颜色为RGB 编号(单色背景数组为```[255,255,255]```,线性渐变背景```[[236, 0, 140],[103, 57, 182],...]```) |
| backgroundColorLinearDeg | String | 45 | 导航背景线性渐变角度 |
| backgroundImg | String | - | 导航背景图片(背景图片优先级高于背景颜色) |
| transparent | String | show | 背景透明(show 不透明,hidden 透明,auto 自动:滑动逐渐显示背景颜色,当头部固定时生效) 兼容性:头条小程序必须在页面上加 onPageScroll(e){} ,才能滑动显示背景,可参考dome7|
| shadow | Boolean | false | 导航栏阴影 |
| border | Boolean | false | 导航栏边框 |
#### 关于状态栏的属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| statusBar | Boolean | true | 包含状态栏 |
| statusBarFontColor | Array,String | #000000 | 状态栏字体颜色,只支持```#000000 ```和```#FFFFFF```(如果需要屏幕滑动变色,参数则为数组,例子:```['#000000','#ffffff']```)|
| statusBarBackground | String | - | 状态栏背景颜色,如果你想单独设置状态栏颜色,该属性是个不错的选择
#### 关于插槽的属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| leftIcon | String | - | 左插槽图标,必须为 ```uni-icons``` 图标 |
| rightIcon | String | - | 右插槽图标,必须为 ```uni-icons``` 图标 |
| leftSlot | Boolean | true | 开启左插槽 |
| rightSlot | Boolean | true | 开启右插槽 |
| leftSlidiSwitch | Boolean | false | 屏幕滑动后 `left`插槽切换为`leftAfter`插槽 |
| centerSlidiSwitch | Boolean | false | 屏幕滑动后 `default`插槽切换为`centerAfter`插槽 |
| rightSlidiSwitch | Boolean | false | 屏幕滑动后 `right`插槽切换为`rightAfter`插槽 |
#### 返回上一页为空时的处理属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| backTabbarUrl | String | /pages/index/index | 返回至指定的tabber页面(返回首页),当上一页为空时生效;全局使用推荐进组件修改`backTabbarUrl`的默认值|
| defaultBackUrl | String | - | 返回至指定的普通页面,当上一页为空时生效;`defaultBackUrl`优先级高于`backTabbarUrl`;主要应用在返回失效时|
``` html
<!-- 使用场景:假如刷新了当前页面,那么返回事件将失效。
这时用上 `defaultBackUrl` 或 `backTabbarUrl` 则能返回至指定页面-->
<hx-navbar left-text="关于" defaultBackUrl="/pages/user/setting/setting" />
```
### 插槽
| 名称 | 描述 |
| ----------------------|-------------------------------------------------------------------|
| left | 左插槽 (可关闭该插槽 ```leftSlot``` 属性) |
| default | 中间插槽(当设置了标题,中间插槽将失效) |
| right | 右插槽 (可关闭该插槽 ```rightSlot``` 属性) |
| leftAfter | 屏幕滑动后的左插槽 (需要开启`leftSlidiSwitch`属性才生效) |
| centerAfter | 屏幕滑动后的中插槽 (需要开启`centerSlidiSwitch`属性才生效) |
| rightAfter | 屏幕滑动后的右插槽 (需要开启`rightSlidiSwitch`属性才生效) |
``` html
<hx-navbar>
<view>标题栏(中间插槽)</view>
<view slot="left">left(左插槽)</view>
<view slot="right">right(右插槽)</view>
</hx-navbar>
```
### 事件
| 名称 | 参数 | 描述 |
| -----------------|------------------| --------------------------|
| click-left | - | 左侧按钮点击时触发,此事件将覆盖 `返回` |
| click-right | - | 右侧按钮点击时触发 |
| scroll | - | 监听滚动条,回调参数为滚动距离;固定�
没有合适的资源?快使用搜索试试~ 我知道了~
uniapp开发的多端影视APP,对接的苹果CMS
共414个文件
php:174个
html:128个
vue:29个
1星 需积分: 12 9 下载量 35 浏览量
2023-03-22
11:03:42
上传
评论
收藏 991KB ZIP 举报
温馨提示
引见 最新三网免挂未速支付系统免授权版,微信为店员,可适配V免签,有pc加app, 采用tp5框架开发。拿出来给大家用,这 引见 苹果10CMS影视APP对接,uniapp开发的多端影视APP 本APP有缓存,投屏,播放记载,珍藏等功用是十分完善的。 是会员中心也是用的苹果cms的数据。能够打包到多端的代码。 项目是采用的Uni-app开发的个人觉得混合app里面最强大的 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 application放到网站根目录掩盖,然后翻开这个目录,把database.php翻开 把数据库地址和密码改成你本人的 幻灯片是引荐5 重磅热播是引荐3 每一个东西都我都付出了宏大的心血,开端一点不懂。都是一点点学的。我学这个也是我的一个兴味。后期我会不断更新APP和api接口.为大家做奉献。 接口都采用的restfui方式。性能更好简单东西会由于协议等等而无法运用,需求自己研讨下
资源推荐
资源详情
资源评论
收起资源包目录
uniapp开发的多端影视APP,对接的苹果CMS (414个子文件)
init.bat 26B
init.bat 26B
init.bat 26B
init.bat 26B
icon.css 70KB
main.css 63KB
animation.css 3KB
iconfont.css 2KB
morentouxiang.gif 17KB
info.html.tar.gz 8KB
.htaccess 13B
info.html 48KB
configcollect.html 37KB
config.html 36KB
info.html 30KB
configurl.html 27KB
info.html 27KB
wizard.html 23KB
info.html 18KB
info.html 17KB
index.html 16KB
info.html 15KB
configuser.html 14KB
configapi.html 14KB
batch.html 12KB
info.html 11KB
index.html 11KB
info.html 11KB
configplay.html 11KB
configupload.html 11KB
configweixin.html 10KB
info.html 9KB
batch.html 8KB
index.html 8KB
index.html 8KB
info.html 8KB
opt.html 8KB
configcomment.html 7KB
config.html 7KB
configsms.html 7KB
index.html 7KB
index.html 7KB
timing.html 7KB
index.html 6KB
index.html 6KB
step3.html 6KB
info.html 6KB
index.html 6KB
index.html 6KB
欧皇源码网.html 6KB
欧皇源码网.html 6KB
欧皇源码网.html 6KB
欧皇源码网.html 6KB
index.html 6KB
info.html 6KB
index.html 5KB
rep.html 5KB
index.html 5KB
configemail.html 5KB
vod.html 5KB
art.html 5KB
index.html 5KB
configconnect.html 5KB
login.html 5KB
index.html 5KB
info.html 4KB
actor.html 4KB
index.html 4KB
publish.html 4KB
info.html 4KB
index.html 4KB
index.html 4KB
index.html 4KB
index.html 4KB
index.html 4KB
reward.html 4KB
configpay.html 4KB
configinterface.html 4KB
index.html 4KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
使用说明.html 3KB
info.html 3KB
info.html 3KB
opt.html 3KB
info.html 3KB
index.html 3KB
index.html 3KB
info.html 3KB
editor.html 3KB
ads.html 3KB
welcome.html 3KB
index.html 3KB
weibo.html 3KB
index.html 3KB
info.html 3KB
sql.html 3KB
共 414 条
- 1
- 2
- 3
- 4
- 5
资源评论
- OttoHX2023-05-13代码不全 14:39:50.748 文件查找失败:'./common/config.js' at main.js:14 14:39:50.750 文件查找失败:'./common/lib.js' at main.js:16 14:39:50.762 文件查找失败:'./common/request.js' at main.js:15 14:39:50.763 文件查找失败:'./common/user.js' at main.js:17 #运行出错 #标题与内容不符 #毫无价值
网创学长
- 粉丝: 1912
- 资源: 914
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功