novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabbar适配安卓端

Browse Source
This commit is contained in:
future
2026-06-11 14:51:07 +08:00
parent c94be9bc38
commit c2a09a5057
9 changed files with 308 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/course/index.vue
+50 -57
View File
@@ -1,40 +1,43 @@
<!-- pages/course/index.vue -->
<template>
<!-- <view class="bg-wrapper">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
</view> -->
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">课程</text>
<text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
</view>
<!-- 骨架屏 -->
<view v-if="loading" class="skeleton-container">
<view class="skeleton-item" v-for="i in 3" :key="i">
<view class="skeleton-img"></view>
<view class="skeleton-text"></view>
<!-- 滚动内容区域 -->
<scroll-view scroll-y="false" class="scroll-container">
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">课程</text>
<text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
</view>
</view>
<!-- 真实内容 -->
<template v-else>
<RecommendCourses :data="courseData" />
<view class="tab-page__actions">
<view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
<text class="tab-page__btn-text">预约课程</text>
</view>
<view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
<text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
<!-- 骨架屏 -->
<view v-if="loading" class="skeleton-container">
<view class="skeleton-item" v-for="i in 3" :key="i">
<view class="skeleton-img"></view>
<view class="skeleton-text"></view>
</view>
</view>
</template>
<view class="bottom-placeholder"></view>
</view>
<!-- 真实内容 -->
<template v-else>
<RecommendCourses :data="courseData" />
<view class="tab-page__actions">
<view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
<text class="tab-page__btn-text">预约课程</text>
</view>
<view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
<text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
</view>
</view>
</template>
<view class="bottom-placeholder"></view>
</view>
</scroll-view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
<TabBar @update:active="handleTabActive" />
</view>
</template>
<script setup>
@@ -128,34 +131,6 @@ function goMyCourses() {
</script>
<style lang="scss" scoped>
.bg-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.wave-bg {
position: fixed;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0.6;
}
.wave-top {
top: 0;
opacity: 0.5;
}
.wave-bottom {
bottom: 100rpx;
opacity: 0.35;
}
.tab-page {
min-height: 100vh;
padding-bottom: 160rpx;
@@ -259,4 +234,22 @@ function goMyCourses() {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 滚动容器 */
.scroll-container {
position: relative;
z-index: 1;
height: 100vh;
width: 100%;
}
/* 固定 TabBar */
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
</style>
gym-manage-uniapp/pages/discover/index.vue
+49 -55
View File
@@ -1,34 +1,37 @@
<template>
<!-- <view class="bg-wrapper">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
</view> -->
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">发现</text>
<text class="tab-page__subtitle">活动 · 资讯 · 今日推荐</text>
<!-- 滚动内容区域 -->
<scroll-view scroll-y class="scroll-container">
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">发现</text>
<text class="tab-page__subtitle">活动 · 资讯 · 今日推荐</text>
</view>
<TodayRecommend />
<view class="discover-links">
<view class="discover-link" hover-class="discover-link--hover" @tap="goReferral">
<text class="discover-link__title">邀请好友</text>
<text class="discover-link__desc">邀请注册/购课，双方得积分</text>
</view>
<view class="discover-link" hover-class="discover-link--hover" @tap="goCouponCenter">
<text class="discover-link__title">领券中心</text>
<text class="discover-link__desc">限时优惠券，先到先得</text>
</view>
<view class="discover-link" hover-class="discover-link--hover" @tap="goPointsMall">
<text class="discover-link__title">积分商城</text>
<text class="discover-link__desc">积分兑换好礼</text>
</view>
</view>
<view class="bottom-placeholder"></view>
</view>
<TodayRecommend />
<view class="discover-links">
<view class="discover-link" hover-class="discover-link--hover" @tap="goReferral">
<text class="discover-link__title">邀请好友</text>
<text class="discover-link__desc">邀请注册/购课，双方得积分</text>
</view>
<view class="discover-link" hover-class="discover-link--hover" @tap="goCouponCenter">
<text class="discover-link__title">领券中心</text>
<text class="discover-link__desc">限时优惠券，先到先得</text>
</view>
<view class="discover-link" hover-class="discover-link--hover" @tap="goPointsMall">
<text class="discover-link__title">积分商城</text>
<text class="discover-link__desc">积分兑换好礼</text>
</view>
</view>
<view class="bottom-placeholder"></view>
</view>
</scroll-view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
<TabBar :active="3" />
</view>
</template>
<script setup>
@@ -50,33 +53,6 @@ function goPointsMall() {
</script>
<style lang="scss" scoped>
.bg-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.wave-bg {
position: fixed;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0.6;
}
.wave-top {
top: 0;
opacity: 0.5;
}
.wave-bottom {
bottom: 100rpx;
opacity: 0.35;
}
.tab-page {
min-height: 100vh;
padding-bottom: 160rpx;
@@ -139,4 +115,22 @@ function goPointsMall() {
.bottom-placeholder {
height: 40rpx;
}
/* 滚动容器 */
.scroll-container {
position: relative;
z-index: 1;
height: 100vh;
width: 100%;
}
/* 固定 TabBar */
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
</style>
gym-manage-uniapp/pages/index/index.vue
+21 -57
View File
@@ -1,9 +1,4 @@
<template>
<!-- 水波纹背景 - 顶层显示 -->
<!-- <view class="bg-wrapper">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
</view> -->
<!-- 固定白色块（滚动时显示） -->
<view class="hand" :style="{height : handHeight + 'rpx'}" v-show="isShow"></view>
@@ -61,24 +56,11 @@ const handleScroll = (e) => {
const distance = e.detail.scrollTop
scrollDistance.value = distance
// 获取滚动容器的高度（可视区域高度）
const scrollViewHeight = e.detail.scrollHeight
scrollContentHeight.value = scrollViewHeight
console.log(`滚动距离: ${distance}`)
// 计算滚动百分比
// 滚动百分比 = 当前滚动距离 / (内容总高度 - 可视区域高度) * 100
const maxScrollDistance = scrollContentHeight.value - windowHeight.value
let scrollPercent = 0
if (maxScrollDistance > 0) {
scrollPercent = (distance / maxScrollDistance) * 100
}
console.log(`滚动距离: ${distance}, 滚动百分比: ${scrollPercent.toFixed(2)}%`)
// 当滚动超过 10% 时显示白色块（你可以调整这个百分比）
const SHOW_THRESHOLD = 40 // 10% 的阈值，可以根据需要调整
isShow.value = scrollPercent > SHOW_THRESHOLD
// 当滚动超过一定距离时显示白色块（200px = 400rpx）
const SHOW_THRESHOLD = 50 // 滚动超过200px时显示白条
isShow.value = distance > SHOW_THRESHOLD
}
// 下拉刷新处理
@@ -118,16 +100,27 @@ onMounted(() => {
loading.value = false
}, 1500)
// 获取胶囊按钮高度
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
handHeight.value = navTotalHeight * 2.5
// 获取可视窗口高度
// 获取系统信息
uni.getSystemInfo({
success: (res) => {
windowHeight.value = res.windowHeight
console.log('可视窗口高度:', windowHeight.value)
console.log('平台:', res.platform)
// #ifdef MP-WEIXIN
// 微信小程序使用胶囊按钮高度（保持原有逻辑）
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navTotalHeight = menuButtonInfo.top + menuButtonInfo.height
handHeight.value = navTotalHeight * 2.5
console.log('微信小程序胶囊按钮高度:', handHeight.value)
// #endif
// #ifndef MP-WEIXIN
// H5和安卓App只显示状态栏高度
const statusBarHeight = res.statusBarHeight || 0
handHeight.value = statusBarHeight * 2 // 转换为rpx（1px = 2rpx）
console.log('非微信小程序状态栏高度:', handHeight.value, 'rpx')
// #endif
}
})
@@ -145,35 +138,6 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
/* 背景包装器 - 固定在最底层 */
.bg-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.wave-bg {
position: fixed;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0.6;
}
.wave-top {
top: 0;
opacity: 0.5;
}
.wave-bottom {
bottom: 100rpx;
opacity: 0.35;
}
/* 滚动容器 */
.scroll-container {
position: relative;
gym-manage-uniapp/pages/memberInfo/memberInfo.vue
+16 -2
View File
@@ -1,5 +1,6 @@
<template>
<view class="scroll-container theme-light">
<!-- 滚动内容区域 -->
<scroll-view scroll-y class="scroll-container theme-light">
<view class="member-page">
<MemberInfoHeader
:user-info="userInfo"
@@ -44,7 +45,10 @@
</view>
</view>
</view>
<!-- TabBar -->
</scroll-view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
<TabBar />
</view>
</template>
@@ -238,4 +242,14 @@ export default {
@import '@/common/style/memberInfo/member-info-referral.css';
@import '@/common/style/memberInfo/member-info-settings.css';
@import '@/common/style/memberInfo/member-info-logout.css';
/* 固定 TabBar */
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
</style>
gym-manage-uniapp/pages/train/index.vue
+49 -55
View File
@@ -1,36 +1,39 @@
<template>
<!-- <view class="bg-wrapper">
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_top.png" mode="widthFix" class="wave-bg wave-top" />
<image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/wave_bottom.png" mode="widthFix" class="wave-bg wave-bottom" />
</view> -->
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">训练</text>
<text class="tab-page__subtitle">记录每一次进步</text>
</view>
<!-- 滚动内容区域 -->
<scroll-view scroll-y class="scroll-container">
<view class="tab-page">
<view class="tab-page__header">
<text class="tab-page__title">训练</text>
<text class="tab-page__subtitle">记录每一次进步</text>
</view>
<view class="train-cards">
<view class="train-card" hover-class="train-card--hover" @tap="goTrainReport">
<text class="train-card__title">训练报告</text>
<text class="train-card__desc">查看本周/本月运动数据与趋势</text>
<view class="train-cards">
<view class="train-card" hover-class="train-card--hover" @tap="goTrainReport">
<text class="train-card__title">训练报告</text>
<text class="train-card__desc">查看本周/本月运动数据与趋势</text>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goBodyTest">
<text class="train-card__title">智能体测</text>
<text class="train-card__desc">连接设备，获取专业体测报告</text>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goBodyHistory">
<text class="train-card__title">体测报告</text>
<text class="train-card__desc">历史记录与对比分析</text>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goCheckIn">
<text class="train-card__title">签到记录</text>
<text class="train-card__desc">到店打卡与训练频次</text>
</view>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goBodyTest">
<text class="train-card__title">智能体测</text>
<text class="train-card__desc">连接设备，获取专业体测报告</text>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goBodyHistory">
<text class="train-card__title">体测报告</text>
<text class="train-card__desc">历史记录与对比分析</text>
</view>
<view class="train-card" hover-class="train-card--hover" @tap="goCheckIn">
<text class="train-card__title">签到记录</text>
<text class="train-card__desc">到店打卡与训练频次</text>
</view>
</view>
<view class="bottom-placeholder"></view>
</view>
<view class="bottom-placeholder"></view>
</view>
</scroll-view>
<!-- 固定 TabBar -->
<view class="tabbar-fixed">
<TabBar :active="2" />
</view>
</template>
<script setup>
@@ -55,33 +58,6 @@ function goCheckIn() {
</script>
<style lang="scss" scoped>
.bg-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}
.wave-bg {
position: fixed;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0.6;
}
.wave-top {
top: 0;
opacity: 0.5;
}
.wave-bottom {
bottom: 100rpx;
opacity: 0.35;
}
.tab-page {
min-height: 100vh;
padding-bottom: 160rpx;
@@ -144,4 +120,22 @@ function goCheckIn() {
.bottom-placeholder {
height: 40rpx;
}
/* 滚动容器 */
.scroll-container {
position: relative;
z-index: 1;
height: 100vh;
width: 100%;
}
/* 固定 TabBar */
.tabbar-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: transparent;
}
</style>