优化细节

This commit is contained in:
icssoa
2025-08-11 14:41:02 +08:00
parent f98684130b
commit 79a4e22265
9 changed files with 158 additions and 81 deletions

View File

@@ -16,6 +16,8 @@
>{{ message }}</cl-text
>
</view>
<cl-safe-area type="bottom" v-if="safeAreaBottom"></cl-safe-area>
</view>
</template>
@@ -53,6 +55,11 @@ const props = defineProps({
finishText: {
type: String,
default: () => t("没有更多了")
},
// 是否显示底部安全区
safeAreaBottom: {
type: Boolean,
default: true
}
});
@@ -80,7 +87,7 @@ const message = computed(() => {
<style lang="scss" scoped>
.cl-loadmore-wrapper {
@apply flex flex-row items-center justify-center py-2;
@apply flex flex-col items-center justify-center py-2;
}
.cl-loadmore {

View File

@@ -1,64 +0,0 @@
<template>
<view class="back-top-wrapper" :style="{ bottom }">
<view
class="back-top"
:class="{
'is-show': visible
}"
>
<cl-icon name="skip-up-line" color="white" size="25px"></cl-icon>
</view>
</view>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { usePage } from "@/cool";
defineOptions({
name: "cl-page-back-top"
});
const page = usePage();
const { screenHeight } = uni.getWindowInfo();
// 是否显示回到顶部按钮
const visible = ref(false);
// 底部距离
const bottom = computed(() => {
let h = 20;
if (page.hasCustomTabBar()) {
h += page.getTabBarHeight();
}
return h + "px";
});
// 监听页面滚动
page.onPageScroll((top) => {
// 控制是否显示回到顶部按钮
visible.value = top > screenHeight - 100;
});
</script>
<style lang="scss" scoped>
.back-top {
@apply flex flex-row items-center justify-center bg-primary-500 rounded-full;
width: 40px;
height: 40px;
transition-property: transform;
transition-duration: 0.3s;
transform: translateX(160rpx);
&.is-show {
transform: translateX(-20px);
}
&-wrapper {
@apply fixed z-50 overflow-visible;
right: 0;
}
}
</style>

View File

@@ -6,7 +6,7 @@
:scroll-with-animation="true"
@scroll="onScroll"
>
<back-top v-if="backTop" @tap="scrollToTop"></back-top>
<cl-back-top v-if="backTop" @tap="scrollToTop"></cl-back-top>
<theme></theme>
<ui></ui>
<slot></slot>
@@ -14,7 +14,7 @@
<!-- #endif -->
<!-- #ifndef APP -->
<back-top v-if="backTop" @tap="scrollToTop"></back-top>
<cl-back-top v-if="backTop" @tap="scrollToTop"></cl-back-top>
<theme></theme>
<ui></ui>
<slot></slot>
@@ -24,7 +24,6 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { router, usePage } from "@/cool";
import BackTop from "./back-top.uvue";
import Theme from "./theme.uvue";
import Ui from "./ui.uvue";
import { locale, t } from "@/locale";
@@ -34,7 +33,7 @@ defineOptions({
name: "cl-page"
});
const props = defineProps({
defineProps({
// 是否显示回到顶部按钮
backTop: {
type: Boolean,

View File

@@ -111,6 +111,22 @@ export type ClListViewItem = {
children?: ClListViewItem[];
};
export type ClListViewGroup = {
index: string;
children: ClListViewItem[];
};
export type ClListViewVirtualItem = {
key: string;
type: "header" | "item";
index: number;
top: number;
height: number;
data: ClListViewItem;
};
export type ClListViewRefresherStatus = "default" | "pulling" | "refreshing";
export type ClCascaderOption = ClListViewItem;
export type ClPopupDirection = "top" | "right" | "bottom" | "center" | "left";