tanxin/App.k12.Parents
1
0
Fork 0
Code Pull Requests Actions Releases Activity

Initial commit

Browse Source
This commit is contained in:
tanxin
2026-10-29 10:08:39 +08:00
commit 4c6243a274
124 changed files with 17359 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uni-nav-bar-x/changelog.md
+4
View File
@@ -0,0 +1,4 @@
## 1.0.1（2026-05-20）
- 纠正类名拼写错误
## 1.0.0（2026-05-07）
- 支持 uni-nav-bar 组件
uni_modules/uni-nav-bar-x/components/uni-nav-bar/uni-nav-bar.uvue
+361
View File
@@ -0,0 +1,361 @@
<template>
<view style="flex-direction: row;padding-top: var(--status-bar-height);box-sizing: content-box;align-items: center;position: relative;">
<view style="height: 44px;align-items: center;justify-content: center;
<!-- #ifdef WEB -->
cursor: pointer
<!-- #endif -->
" class="uni-left-class-builtin" :class="leftClass">
<!-- 旋转边框的view实现返回箭头。因需要扩大点击区域，外面多套了一层 -->
<view v-if="!hideDefaultBack && slots['left']==null" style="width: 44px;height: 44px;justify-content: center;align-items: center;" @click="back">
<view style="width: 12px;height: 12px;transform: rotate(45deg);
border-left: 2px solid; border-bottom: 2px solid;" :style="backIconStyle"></view>
</view>
<slot name="left" v-else></slot>
</view>
<view style="position: absolute; height: 44px; flex-direction: row; align-items: center;" class="uni-mid-class-builtin" :class="midClass" flatten>
<text v-if="slots['mid']==null" :style="titleStyle" flatten> {{ title }} </text>
<slot name="mid" v-else></slot>
</view>
<view style="position: absolute; height: 44px; flex-direction: row; align-items: center;right: 0;" class="uni-right-class-builtin" :class="rightClass" flatten>
<slot name="right"></slot>
</view>
</view>
</template>
<script lang="ts" setup>
/**
* 自定义导航栏
* @description 自定义导航栏组件
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
defineOptions({
// inheritAttrs: false,
externalClasses: ['left-class','mid-class','right-class']
})
const props = defineProps({
/**
* @description 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮
* @default false
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
hideDefaultBack: { type: Boolean, default: false },
/**
* @description 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
title: { type: String, default: "" },
// navigationBarTextStyle: { type: "#000000" | "#ffffff" | "#000" | "#fff" | "black" | "white" | "", default: "" },
/**
* @description 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
navigationBarTextStyle: { type: String as PropType<"white" | "black" | "">, default: "" },
/**
* @description 左侧区域的自定义样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
leftClass: { type: String, default: "" },
/**
* @description 中间区域的自定义样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
midClass: { type: String, default: "" },
/**
* @description 右侧区域的自定义样式类
* @default ""
* @uniPlatform {
* "app": {
* "android": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.21"
* },
* "ios": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.11"
* },
* "harmony": {
* "uniVer": "x",
* "unixVer": "5.07",
* "unixVaporVer": "5.07"
* }
* },
* "mp": {
* "weixin": {
* "uniVer": "x",
* "unixVer": "5.07"
* },
* "alipay": {
* "uniVer": "x",
* "unixVer": "5.31"
* }
* },
* "web": {
* "uniVer": "x",
* "unixVer": "5.07"
* }
* }
*/
rightClass: { type: String, default: "" }
// stat: { type: Boolean, default: false }
})
const slots = useSlots();
const backIconStyle = computed(() : string => {
return props.navigationBarTextStyle == "" ? "" : `border-left-color: ${props.navigationBarTextStyle}; border-bottom-color: ${props.navigationBarTextStyle};`;
})
const titleStyle = computed(() : string => {
return props.navigationBarTextStyle == "" ? "" : `color: ${props.navigationBarTextStyle};`;
})
// #ifndef MP
// 获取pageStyle在web和app上都没有兼容theme.json的场景，这段代码注释掉。需要先修改底层bug。本组件使用了其他方案
/* const currentPage = getCurrentInstance()?.proxy?.$page
console.log("props.navigationBarTextStyle:",props.navigationBarTextStyle);
console.log("navigationBarTextStyle：",currentPage?.getPageStyle()["navigationBarTextStyle"]);
console.log("backgroundColorContent：",currentPage?.getPageStyle()["backgroundColorContent"]);
const foreColor = (props.navigationBarTextStyle=="") ? currentPage?.getPageStyle()["navigationBarTextStyle"] : props.navigationBarTextStyle; //如果外部没有传入前景色，从pageStyle获取
console.log("foreColor:",foreColor); */
// #endif
// #ifdef MP
// const foreColor = props.navigationBarTextStyle; //小程序端无法获取pageStyle，需要显式传入前景色
// #endif
/* const foreColor = computed(() : string => {
return props.navigationBarTextStyle;
}) */
// let statusBarHeight = ref(0)
onMounted(() => {
// #ifdef MP-WEIXIN
// TODO 部分小程序平台不支持getWindowInfo
// statusBarHeight.value = uni.getWindowInfo().statusBarHeight
// #endif
/* if (props.stat && props.title != '') {
uni.report({
name: 'title',
options: props.title
})
} */
})
const back = () => {
uni.navigateBack({});
}
</script>
<style>
.uni-left-class-builtin {
width: 44px;
margin-left: 6px;
}
.uni-mid-class-builtin {
justify-content: center;
left: 52px; /* padding 6 + 44 = 52*/
right: 52px;
}
.uni-right-class-builtin {
width: 44px;
margin-right: 6px;
}
</style>
uni_modules/uni-nav-bar-x/package.json
+73
View File
@@ -0,0 +1,73 @@
{
"id": "uni-nav-bar-x",
"displayName": "uni-nav-bar",
"version": "1.0.1",
"description": "uni-nav-bar",
"isExt": true,
"extUrl": "https://ext.dcloud.net.cn/plugin?id=27897",
"keywords": [
"uni-nav-bar",
"uni-app-x",
"导航栏",
"组件"
],
"repository": "https://gitcode.com/dcloud/uni-ui-x",
"engines": {
"HBuilderX": "^5.0",
"uni-app-x": "^5.07",
"uni-app": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"darkmode": "x",
"i18n": "x",
"widescreen": "x",
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "x",
"aliyun": "x",
"alipay": "x"
},
"client": {
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": "√",
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}
uni_modules/uni-nav-bar-x/readme.md
+63
View File
@@ -0,0 +1,63 @@
自定义导航栏组件
在页面pages.json中关闭原生导航栏后，即使用`"style": {"navigationStyle": "custom"}`，可以使用本组件实现自定义导航栏。
同时注意在pages.json中配置页面style增加属性`disableScroll:true`，即禁止页面滚动。此时只有uni-nav-bar组件的下方才可以滚动。否则页面的回弹bounce效果会把自定义导航栏也拉下来。
本组件自动适配顶部安全区。用padding-top让出顶部状态栏的高度。除去状态栏高度后，本组件的高度为44px。
本组件左右两边默认各让出了6px的边距。也可以在left-class和right-class中自定义边距。
本组件分为left、mid、right 3个区域。
- left区域默认显示一个返回箭头，大小为44*44px。可以通过属性hideDefaultBack来隐藏，也可以传入一个slot name='left'来替代。可以通过left-class来修饰样式。
- mid区域默认显示title属性设置的标题。也可以传入一个slot name='mid'来替代。其默认宽度为屏幕宽度-两边默认边距-left区域默认宽度-right区域默认宽度。可以通过mid-class来修饰样式。
- right区域默认不显示内容，可以传入一个slot name='right'来显示自定义内容。right区域默认width也是44px，可以通过right-class来修饰样式。
支持属性：
- hideDefaultBack: 隐藏返回箭头
- title: 通过属性方便设置标题。如果传入mid slot，则不生效
- navigationBarTextStyle: 返回箭头和属性设置的标题，它们的颜色均由该属性控制，可选 white|black
本组件默认没有背景色，即透明，会透显页面的背景色，开发者可通过组件的class自行设置背景色。
如果遇到顶部安全区避让失效的问题，可升级到 HBuilderX 5.25 版本。
在小程序端，如果需要规避右上角胶囊按钮，可以参考下方代码设置 margin-right 让出胶囊按钮的宽度和右侧间距。
```html
<template>
<uni-nav-bar title="标题" right-class="nav-right">
<template #right>
<view :style="{ transform: 'translateX(-' + rightMargin + 'px)' }">
<text class="txt-button">right</text>
</view>
</template>
</uni-nav-bar>
</template>
<script setup lang="ts">
const rightMargin = ref(0)
onMounted(() => {
// #ifdef MP-WEIXIN
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const windowInfo = uni.getWindowInfo()
// 预留胶囊按钮宽度和右侧间距，让右侧插槽显示在胶囊按钮左边
rightMargin.value = windowInfo.windowWidth - menuButtonInfo.right + menuButtonInfo.width
// #endif
})
</script>
<style>
.nav-right {
overflow: visible;
}
.txt-button {
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
}
</style>
```