@hlw-uni/mp-vue 2.5.0 → 2.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view :class="[fontSizeClass, fontFamilyClass]" :style="pageStyle">
|
|
2
|
+
<view class="hlw-page-container" :class="[fontSizeClass, fontFamilyClass]" :style="pageStyle">
|
|
3
3
|
<hlw-nav-bar v-if="props.isNav"
|
|
4
4
|
:is-back="props.isBack"
|
|
5
5
|
:title="title"
|
|
@@ -10,8 +10,29 @@
|
|
|
10
10
|
:title-weight="props.titleWeight"
|
|
11
11
|
:border="props.border">
|
|
12
12
|
</hlw-nav-bar>
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
|
|
14
|
+
<!-- 上插槽 -->
|
|
15
|
+
<view class="hlw-page-top">
|
|
16
|
+
<slot name="top"></slot>
|
|
17
|
+
</view>
|
|
18
|
+
|
|
19
|
+
<!-- 内容插槽 scroll-view -->
|
|
20
|
+
<scroll-view
|
|
21
|
+
class="hlw-page-content"
|
|
22
|
+
scroll-y
|
|
23
|
+
:refresher-enabled="props.refresherEnabled"
|
|
24
|
+
:refresher-triggered="props.refresherTriggered"
|
|
25
|
+
@refresherrefresh="onRefresh"
|
|
26
|
+
@scrolltolower="onScrollToLower"
|
|
27
|
+
>
|
|
28
|
+
<slot></slot>
|
|
29
|
+
<view class="h-[60rpx]"></view>
|
|
30
|
+
</scroll-view>
|
|
31
|
+
|
|
32
|
+
<!-- 下插槽 -->
|
|
33
|
+
<view class="hlw-page-bottom">
|
|
34
|
+
<slot name="bottom"></slot>
|
|
35
|
+
</view>
|
|
15
36
|
</view>
|
|
16
37
|
</template>
|
|
17
38
|
|
|
@@ -32,16 +53,25 @@
|
|
|
32
53
|
* titleStyle - 标题字体样式
|
|
33
54
|
* titleWeight - 标题字重
|
|
34
55
|
* border - 是否显示自定义导航栏的下边框（下划线），默认 true
|
|
56
|
+
* refresherEnabled - 是否开启下拉刷新，默认 false
|
|
57
|
+
* refresherTriggered - 设置当前下拉刷新状态，true 表示下拉刷新已被触发，false 表示下拉刷新未被触发
|
|
35
58
|
*
|
|
36
59
|
* @example
|
|
37
60
|
* ```vue
|
|
38
61
|
* <hlw-page is-nav is-back title="个人中心">
|
|
39
|
-
* <
|
|
62
|
+
* <template #top>
|
|
63
|
+
* <view>固定在顶部的内容...</view>
|
|
64
|
+
* </template>
|
|
65
|
+
* <view>滚动的内容...</view>
|
|
66
|
+
* <template #bottom>
|
|
67
|
+
* <view>固定在底部的内容...</view>
|
|
68
|
+
* </template>
|
|
40
69
|
* </hlw-page>
|
|
41
70
|
* ```
|
|
42
71
|
*/
|
|
43
72
|
import { useTheme } from "@/core";
|
|
44
73
|
import { ref, computed } from "vue";
|
|
74
|
+
|
|
45
75
|
const { fontSizeClass, fontFamilyClass } = useTheme();
|
|
46
76
|
|
|
47
77
|
const props = defineProps({
|
|
@@ -80,9 +110,19 @@ const props = defineProps({
|
|
|
80
110
|
border: {
|
|
81
111
|
type: Boolean,
|
|
82
112
|
default: true,
|
|
113
|
+
},
|
|
114
|
+
refresherEnabled: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: false,
|
|
117
|
+
},
|
|
118
|
+
refresherTriggered: {
|
|
119
|
+
type: Boolean,
|
|
120
|
+
default: false,
|
|
83
121
|
}
|
|
84
122
|
});
|
|
85
123
|
|
|
124
|
+
const emit = defineEmits(["refresh", "scrolltolower"]);
|
|
125
|
+
|
|
86
126
|
const title = ref(props.title);
|
|
87
127
|
|
|
88
128
|
const navbarHeight = computed(() => {
|
|
@@ -105,9 +145,40 @@ const pageStyle = computed(() => {
|
|
|
105
145
|
"--navbar-height": `${navbarHeight.value}px`,
|
|
106
146
|
};
|
|
107
147
|
});
|
|
148
|
+
|
|
149
|
+
function onRefresh() {
|
|
150
|
+
emit("refresh");
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
function onScrollToLower() {
|
|
154
|
+
emit("scrolltolower");
|
|
155
|
+
}
|
|
108
156
|
</script>
|
|
109
157
|
|
|
110
158
|
<style lang="scss">
|
|
159
|
+
.hlw-page-container {
|
|
160
|
+
height: 100vh;
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
overflow: hidden;
|
|
164
|
+
box-sizing: border-box;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.hlw-page-top {
|
|
168
|
+
flex-shrink: 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.hlw-page-content {
|
|
172
|
+
flex: 1;
|
|
173
|
+
height: 0;
|
|
174
|
+
min-height: 0;
|
|
175
|
+
width: 100%;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.hlw-page-bottom {
|
|
179
|
+
flex-shrink: 0;
|
|
180
|
+
}
|
|
181
|
+
|
|
111
182
|
/* 全局系统字体大小缩放配置 */
|
|
112
183
|
.font-size-small {
|
|
113
184
|
--font-xs: 20rpx;
|