feat(tabbar): 处理tabbar和通屏页面
This commit is contained in:
Burt
parent
f530bf8d20
commit
3f5818ed86
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -29,5 +29,12 @@
|
||||
"pages.json": "jsonc", // pages.json 可以写注释
|
||||
"manifest.json": "jsonc" // manifest.json 可以写注释
|
||||
},
|
||||
"cSpell.words": ["Tabbar"]
|
||||
"cSpell.words": [
|
||||
"commitlint",
|
||||
"dcloudio",
|
||||
"refresherrefresh",
|
||||
"scrolltolower",
|
||||
"tabbar",
|
||||
"WechatMiniprogram"
|
||||
]
|
||||
}
|
||||
|
||||
@ -7,13 +7,19 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"path": "pages/throughout/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarTitleText": "通屏+下拉刷新+自定义导航栏",
|
||||
"enablePullDownRefresh": true,
|
||||
"backgroundColor": "#23c09c", // 这个背景色要与页面的.top-section的背景图差不多，这样下拉刷新看起来才比较协调
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
@ -29,12 +35,26 @@
|
||||
}
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#3cc51f",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "black",
|
||||
"height": "50px",
|
||||
"fontSize": "10px",
|
||||
"iconWidth": "24px",
|
||||
"spacing": "3px",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index"
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/tab-icons/extui.png",
|
||||
"selectedIconPath": "static/tab-icons/extuiHL.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/my/index"
|
||||
"pagePath": "pages/throughout/index",
|
||||
"iconPath": "static/tab-icons/template.png",
|
||||
"selectedIconPath": "static/tab-icons/templateHL.png",
|
||||
"text": "通屏"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
|
||||
<button class="i-carbon-sun dark:i-carbon-moon text-green-300" />
|
||||
<fly-header></fly-header>
|
||||
<navigator url="/pages/test1/index" open-type="navigate" hover-class="navigator-hover">
|
||||
去二级页
|
||||
<navigator url="/pages/my/index" open-type="navigate" hover-class="navigator-hover">
|
||||
去我的
|
||||
</navigator>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -1,131 +1,3 @@
|
||||
<template>
|
||||
<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>
|
||||
</navigator>
|
||||
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
|
||||
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
|
||||
<navigator
|
||||
v-else-if="!isTabbar"
|
||||
open-type="switchTab"
|
||||
url="/pages/index/index"
|
||||
class="left-icon"
|
||||
>
|
||||
<button class="i-carbon-home text-current"></button>
|
||||
</navigator>
|
||||
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
|
||||
<view class="title">{{ '我是标题' }}</view>
|
||||
</view>
|
||||
<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>
|
||||
<view>我的</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;
|
||||
height: 100%;
|
||||
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>
|
||||
|
||||
131
src/pages/throughout/index.vue
Normal file
131
src/pages/throughout/index.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<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>
|
||||
</navigator>
|
||||
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
|
||||
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
|
||||
<navigator
|
||||
v-else-if="!isTabbar"
|
||||
open-type="switchTab"
|
||||
url="/pages/index/index"
|
||||
class="left-icon"
|
||||
>
|
||||
<button class="i-carbon-home text-current"></button>
|
||||
</navigator>
|
||||
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
|
||||
<view class="title">{{ '我是标题' }}</view>
|
||||
</view>
|
||||
<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;
|
||||
height: 100%;
|
||||
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>
|
||||
BIN
src/static/tab-icons/extui.png
Normal file
BIN
src/static/tab-icons/extui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/static/tab-icons/extuiHL.png
Normal file
BIN
src/static/tab-icons/extuiHL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
src/static/tab-icons/template.png
Normal file
BIN
src/static/tab-icons/template.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 B |
BIN
src/static/tab-icons/templateHL.png
Normal file
BIN
src/static/tab-icons/templateHL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 B |
Loading…
x
Reference in New Issue
Block a user