Yinux/unibest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 同时支持h5和weixin的导航栏渐变

Browse Source
This commit is contained in:
Burt 2024-01-05 10:57:20 +08:00
parent c44760743a
commit 81c85b5e35
6 changed files with 222 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pages.config.ts
View File

@ -6,6 +6,7 @@ export default defineUniPages({
navigationBarTitleText: 'vue3-uniapp',
navigationBarBackgroundColor: '#f8f8f8',
navigationBarTextStyle: 'black',
backgroundColor: '#FFFFFF',
},
easycom: {
autoscan: true,

29
src/pages.json
View File

@ -3,7 +3,8 @@
"navigationStyle": "default",
"navigationBarTitleText": "vue3-uniapp",
"navigationBarBackgroundColor": "#f8f8f8",
"navigationBarTextStyle": "black"
"navigationBarTextStyle": "black",
"backgroundColor": "#FFFFFF"
},
"easycom": {
"autoscan": true,
@ -62,7 +63,31 @@
"navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
"enablePullDownRefresh": true,
"backgroundColor": "#23c09c",
"navigationStyle": "custom"
"app-plus": {
"titleNView": {
"type": "transparent"
}
},
"mp-weixin": {
"navigationStyle": "custom"
}
}
},
{
"path": "pages/throughout2/index",
"type": "page",
"style": {
"navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
"enablePullDownRefresh": false,
"backgroundColor": "#23c09c",
"app-plus": {
"titleNView": {
"type": "transparent"
}
},
"mp-weixin": {
"navigationStyle": "custom"
}
}
}
],

3
src/pages/index/index.vue
View File

@ -19,6 +19,9 @@
Demo Count: {{ countStore.count }}
<button class="ml-2" @click="countStore.increment">新增</button>
</view>
<uni-card>
<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
</uni-card>
<uni-icons type="contact" size="30" color="red"></uni-icons>
<uni-badge text="1"></uni-badge>
<!-- Sun in light mode, Moon in dark mode, from Carbon -->

26
src/pages/throughout/index.vue
View File

@ -4,16 +4,24 @@
navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
enablePullDownRefresh: true,
backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
navigationStyle: 'custom',
'app-plus': {
titleNView: {
type: 'transparent',
},
},
'mp-weixin': {
navigationStyle: 'custom',
},
},
}
</route>
<template>
<!-- #ifdef MP-WEIXIN -->
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 1/3，多于1个页面，用返回图标 -->
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
<button class="i-carbon-chevron-left text-current"></button>
<view class="i-carbon-chevron-left text-current"></view>
</navigator>
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
@ -23,11 +31,12 @@
url="/pages/index/index"
class="left-icon"
>
<button class="i-carbon-home text-current"></button>
<view class="i-carbon-home text-current"></view>
</navigator>
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
<view class="title">{{ '我是标题' }}</view>
</view>
<!-- #endif -->
<scroll-view
enable-back-to-top
scroll-y
@ -48,6 +57,9 @@
onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
</view>
<navigator url="/pages/throughout2/index" open-type="navigate" hover-class="navigator-hover">
<button>去二级详情页</button>
</navigator>
<view class="bg-white">
<fly-content :line="30" />
</view>
@ -87,7 +99,15 @@ const onRefresherRefresh = async () => {
page {
display: flex;
flex-direction: column;
// #ifdef MP-WEIXIN
height: 100%;
// #endif
// #ifndef MP-WEIXIN
min-height: 100%;
// #endif
overflow: hidden;
}

160
src/pages/throughout2/index.vue Normal file
View File

@ -0,0 +1,160 @@
<route lang="json5">
{
style: {
navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
enablePullDownRefresh: false,
backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
'app-plus': {
titleNView: {
type: 'transparent',
},
},
'mp-weixin': {
navigationStyle: 'custom',
},
},
}
</route>
<template>
<!-- #ifdef MP-WEIXIN -->
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<!-- 1/3，多于1个页面，用返回图标 -->
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
<view class="i-carbon-chevron-left text-current"></view>
</navigator>
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
<navigator
v-else-if="!isTabbar"
open-type="switchTab"
url="/pages/index/index"
class="left-icon"
>
<view class="i-carbon-home text-current"></view>
</navigator>
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
<view class="title">{{ '我是标题' }}</view>
</view>
<!-- #endif -->
<scroll-view
enable-back-to-top
scroll-y
class="scroll-view-bg flex-1 h-full"
id="scroller"
refresher-enabled
@scrolltolower="onScrollToLower"
@refresherrefresh="onRefresherRefresh"
:refresher-triggered="isTriggered"
>
<view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<view class="pt-1">顶部区域</view>
<view>可以是标题，也可以是个人中心头像等</view>
<view>建议本区域高度不低于200rpx</view>
</view>
<view class="p-2 leading-6 bg-white">
注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
</view>
<view class="bg-white">
<fly-content :line="30" />
</view>
</scroll-view>
</template>
<script lang="ts" setup>
import useNavbarWeixin from '@/hooks/useNavbarWeixin'
import { onPullDownRefresh } from '@dcloudio/uni-app'
const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
onPullDownRefresh(() => {
setTimeout(function fn() {
console.log('refresh - onPullDownRefresh')
// 关闭动画
uni.stopPullDownRefresh()
}, 1000)
})
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherRefresh = async () => {
// 开始动画
isTriggered.value = true
setTimeout(function fn() {
console.log('refresh - onRefresherRefresh')
// 关闭动画
isTriggered.value = false
}, 1000)
}
</script>
<style lang="scss">
page {
display: flex;
flex-direction: column;
// #ifdef MP-WEIXIN
height: 100%;
// #endif
// #ifndef MP-WEIXIN
min-height: 100%;
// #endif
overflow: hidden;
}
.scroll-view-bg {
// 这个背景色要与.top-section的背景图差不多，这样下拉刷新看起来才比较协调
background-color: #23c09c;
}
// 这个区域最好要大于200rpx，效果会更好
.top-section {
display: flex;
flex-direction: column;
align-items: center;
min-height: 200rpx;
padding: 40rpx 0;
line-height: 2;
color: #fff;
background-image: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/top-bg.png');
background-size: cover;
}
.fly-navbar {
position: fixed;
top: 0;
left: 0;
z-index: 9;
width: 750rpx;
color: #000;
background-color: transparent;
.left-icon {
position: absolute;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 44rpx;
color: #000;
}
.title {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
font-size: 32rpx;
color: transparent;
}
}
</style>

15
uni-pages.d.ts vendored
View File

@ -7,19 +7,20 @@ interface NavigateToOptions {
url: "pages/index/index" |
"pages/demo/index" |
"pages/my/index" |
"pages/throughout/index";
"pages/throughout/index" |
"pages/throughout2/index";
}
interface RedirectToOptions extends NavigateToOptions {}
interface SwitchTabOptions {
url: 'pages/index/index' | 'pages/throughout/index'
url: "pages/index/index" | "pages/throughout/index"
}
type ReLaunchOptions = NavigateToOptions | SwitchTabOptions
type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;
declare interface Uni {
navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void
redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void
switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void
reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void
navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void;
redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void;
switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void;
reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void;
}