zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页+我的

Browse Source
This commit is contained in:
始于初见
2024-04-19 10:35:20 +08:00
parent 1bcb13ce7a
commit 8407d51fb6
538 changed files with 934456 additions and 1635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
uni_modules/z-nav-bar/components/z-nav-bar/z-nav-bar.vue
View File

@@ -1,81 +1,108 @@
<template>
<view>
<view
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute': '', navShadow ? 'header_shadow': '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue}]"
>
:class="[navFixed ? 'header_fixed' : '', type == 'transparent' ? 'header_absolute' : '', navShadow ? 'header_shadow' : '', themeBgColorName]"
:style="[navBgColor ? { backgroundImage: navBgColor } : {}, { paddingTop: statusBarHeight + 'px', color: navFontColor, opacity: transparentValue }]">
<view class="header_content">
<view class="header_left_box">
<slot name="left">
<view class="header_left_info" :class="[isTwoBtn ? 'header_btnMongol' : '' , isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']" v-if="back || $slots.left || home">
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info"
:class="[isTwoBtn ? 'header_btnMongol' : '', isWhite && isTwoBtn ? 'header_colorWhite_btnMongol' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<text class="header_left_line" :class="[isWhite ? 'header_colorWhite_left_line' : '']"
v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title" v-if="!titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)" :style="{ color: navFontColor }">
<view class="header_title header_title_center" v-if="titleCenter && ($slots.default || navTitle)"
:style="{ color: navFontColor }">
<slot>
<text :style="{ color: navFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="right"></slot></view>
<view class="header_right_info">
<slot name="right"></slot>
</view>
</view>
</view>
<view
class="header_transparentFixed header_fixed"
v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90}"
>
<view class="header_transparentFixed header_fixed" v-if="type == 'transparentFixed'"
:style="{ paddingTop: statusBarHeight + 'px', color: navTransparentFixedFontColor, opacity: 1 - transparentValue, zIndex: transparentValue < 0.3 ? 100 : 90 }">
<view class="header_content">
<view class="header_left_box">
<slot name="transparentFixedLeft">
<view
class="header_left_info header_transparentFixed_left_info"
:class="[ isWhite ? 'header_transparentFixed_colorWhite_left_info' : '' ]"
v-if="back || $slots.left || home"
>
<view class="header_left_back" :class="[ isTwoBtn ? 'header_btnMongol_left_back' : '' ]" v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png" mode="aspectFit"></image>
<view class="header_left_info header_transparentFixed_left_info"
:class="[isWhite ? 'header_transparentFixed_colorWhite_left_info' : '']"
v-if="back || $slots.left || home">
<view class="header_left_back" :class="[isTwoBtn ? 'header_btnMongol_left_back' : '']"
v-if="back && !firstPage" @click="onBackPage">
<image class="header_icon" v-if="isWhite" src="../../static/icon_back_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_back_black.png"
mode="aspectFit">
</image>
</view>
<text class="header_left_line" v-if="isTwoBtn"></text>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']" v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png" mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png" mode="aspectFit"></image>
<view class="header_left_home" :class="[isTwoBtn ? 'header_btnMongol_left_home' : '']"
v-if="(firstPage && back) || home" @click="onBackHome">
<image class="header_icon" v-if="isWhite" src="../../static/icon_home_white.png"
mode="aspectFit"></image>
<image class="header_icon" v-else src="../../static/icon_home_black.png"
mode="aspectFit">
</image>
</view>
</view>
</slot>
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title" v-if="!titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
</view>
<view class="header_title header_title_center" v-if="titleCenter && (navTitle || $slots.transparentFixed)" :style="{ color: navTransparentFixedFontColor }">
<view class="header_title header_title_center"
v-if="titleCenter && (navTitle || $slots.transparentFixed)"
:style="{ color: navTransparentFixedFontColor }">
<slot name="transparentFixed">
<text :style="{ color: navTransparentFixedFontColor }">{{ navTitle }}</text>
</slot>
</view>
<view class="header_right_info"><slot name="transparentFixedRight"></slot></view>
<view class="header_right_info">
<slot name="transparentFixedRight"></slot>
</view>
</view>
</view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="header_station"></view></view>
<view v-if="type == 'fixed'" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="header_station"></view>
</view>
</view>
</template>
<script>
import componentConfig from "@/config/componentConfig"
import {
mainPagePath,
homePath
} from "@/config/componentConfig"
//白色表达值
const whiteList = ['#FFF', '#fff', '#FFFFFF', '#ffffff', 'white', 'rgb(255,255,255)', 'rgba(255,255,255,1)'];
export default {
@@ -85,53 +112,53 @@ export default {
// 2000 不显示返回按钮
// 3000 自定义返回按钮方法，点击返回箭头后会发送一个backClick事件
backState: {
type: [String, Number],
default: function() {
type: [String, Number],
default: function () {
return 1000;
}
},
//是否显示返回首页按钮
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
// 1000 显示首页按钮
// 2000 不显示首页按钮
// 3000 自定义首页按钮方法，点击首页箭头后会发送一个homeClick事件
homeState: {
type: [String, Number],
default: function() {
default: function () {
return 2000;
}
},
//导航背景色，支持渐变
bgColor: {
type: [String, Array],
default: function() {
default: function () {
return '#FFFFFF';
}
},
// 导航背景色渐变角度
bgColorAngle: {
type: [String, Number],
default: function() {
default: function () {
return 90;
}
},
//导航字体颜色，字体颜色为白色的时候会把手机状态栏设置为白色，否则为黑色
fontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
//标题是否居中
titleCenter: {
type: Boolean,
default: function() {
default: function () {
return true;
}
},
//标题
title: {
type: String,
default: function() {
default: function () {
return '';
}
},
@@ -141,28 +168,28 @@ export default {
//transparentFixed 透明固定的
type: {
type: String,
default: function() {
default: function () {
return 'fixed';
}
},
//透明固定的时候字体颜色
transparentFixedFontColor: {
type: String,
default: function() {
default: function () {
return '#000000';
}
},
// 屏幕滑动距离顶部距离(透明固定导航比传)
scrollTop: {
type: Number,
default: function() {
default: function () {
return 0;
}
},
// 是否显示阴影
shadow: {
type: Boolean,
default: function() {
default: function () {
return false;
}
}
@@ -192,7 +219,7 @@ export default {
back() {
return this.backState == 1000 || this.backState == 3000;
},
home() {
home() {
return this.homeState == 1000;
},
//导航固定
@@ -256,7 +283,7 @@ export default {
let currentPages = getCurrentPages();
let pageLen = currentPages.length;
//判断是否是第一个页面，如果是有设置back为true的页面，将不显示返回箭头，而显示返回首页按钮
if (pageLen == 1 && !componentConfig.mainPagePath.includes(currentPages[0].route)) {
if (pageLen == 1 && !mainPagePath.includes(currentPages[0].route)) {
this.firstPage = true;
}
},
@@ -272,13 +299,13 @@ export default {
},
//返回首页
onBackHome() {
if(this.homeState == 3000){
this.$emit('homeClick');
} else {
uni.reLaunch({
url: componentConfig.homePath
});
}
if (this.homeState == 3000) {
this.$emit('homeClick');
} else {
uni.reLaunch({
url: homePath
});
}
},
pageScroll(e) {
if (this.type == 'transparentFixed') {
@@ -300,10 +327,10 @@ export default {
if (this.type == 'transparent') {
this.navBgColor = '';
} else if (/^#|rgb\(|rgba\(/.test(val)) {
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
this.navBgColor = 'linear-gradient(90deg,' + val + ',' + val + ')';
} else {
this.themeBgColorName = val;
this.navBgColor = '';
this.themeBgColorName = val;
this.navBgColor = '';
}
} else if (Array.isArray(val) && val.length >= 2) {
let navBgColor = 'linear-gradient(' + this.bgColorAngle + 'deg';
@@ -440,7 +467,6 @@ export default {
}
.header_title {
width: 80%;
height: 88rpx;
font-size: 32rpx;
padding-left: 30rpx;
@@ -531,4 +557,4 @@ export default {
.header_colorWhite_left_line {
background-color: rgba(255, 255, 255, 0.3);
}
</style>
</style>

47
uni_modules/z-nav-bar/readme.md
View File

@@ -23,42 +23,57 @@
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
# `关键配置`（config/componentConfig.js）
### 本组件全局配置（位置：zhouWei-navBar/index.vue =>页面script）
1. 主页页面的页面路径
2. 首页页面路径
```
// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
const mainPagePath = ["pages/navList"];
//返回首页的地址
const homePath = "/pages/navList";
```
### 在main.js引入组件，并注册全局组件
```
import zhouWeiNavBar from "@/components/zhouWei-navBar";
Vue.component("nav-bar", zhouWeiNavBar);
```
### 或者在页面script中引入组件，并注册组件（nvue页面必须是这样引入）
```
import navBar from "@/components/zhouWei-navBar";
export default {
// 主页页面的页面路径
// 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
// 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
mainPagePath: ['pages/home/home', 'pages/my/my', 'pages/demo/common', 'pages/template/common', 'pages/apiDemo/common', "pages/template/addTemplate"],
//返回首页的地址
homePath: '/pages/template/addTemplate'
components: {navBar}
}
```
### 案例一
默认特性：左上角有返回箭头，nav-bar导航固定在顶部、标题居中
```
<z-nav-bar>我的</z-nav-bar>
<nav-bar>我的</nav-bar>
```
### 案例二
特性：无返回箭头、字体色为白色、标题左对齐、nav-bar导航透明并不固定在顶部、右边插槽有按钮
```
<z-nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
<nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent" title="我的">
<view class="icon_setUp" slot="right">设置</view>
</z-nav-bar>
</nav-bar>
```
### 案例三：颜色渐变导航
特性：颜色渐变导航
```
<z-nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></z-nav-bar>
<nav-bar home :bgColor="['#f37402','#0f0']" bgColorAngle="90" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
```
### 案例四：颜色渐变导航
特性：颜色渐变导航
```
<z-nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></z-nav-bar>
<nav-bar :bgColor="bgColorList" bgColorAngle="45" fontColor="#FFF" title="颜色渐变导航"></nav-bar>
<!-- bgColor值 -->
bgColorList:[
{color:"#f37402",scale:"0%"},
@@ -71,10 +86,10 @@ bgColorList:[
### 案例五：滑动透明导航
特性：有返回箭头、nav-bar导航透明并固定在顶部、透明状态字体为白色、页面想下滑动nav-bar导航条逐渐变白色、右边插槽有按钮
```
<z-nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
<nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#FFF" type="transparentFixed" title="我的简历">
<view class="transparent_fixed_preview" slot="transparentFixedRight" @click="onPreview">预览</view> //透明状态下的按钮
<view class="preview" slot="right" @click="onPreview">预览</view> //不状态下的按钮
</z-nav-bar>
</nav-bar>
```
```
//设置滚动值方法一：
@@ -95,13 +110,13 @@ onPageScroll (e) {
### 案例六：搜索框|地区选择
特性：无返回箭头、nav-bar导航固定在顶部、地区选择、搜索框
```
<z-nav-bar backState="2000">
<nav-bar backState="2000">
<view slot="left" class="address_select">深圳市</view>
<view slot="right" class="search_box" @click="onPageJump('/pages/home/search')">
<text class="icon_search"></text>
<text class="tips">搜索目的地/职位等</text>
</view>
</z-nav-bar>
</nav-bar>
```
### 属性