uview-plus 3.4.68 → 3.4.69
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/changelog.md
CHANGED
|
@@ -62,7 +62,34 @@
|
|
|
62
62
|
class="refresh-content-wrapper"
|
|
63
63
|
:style="{ transform: `translateY(${contentTranslateY}px)` }"
|
|
64
64
|
>
|
|
65
|
-
<
|
|
65
|
+
<scroll-view
|
|
66
|
+
v-if="useScrollView"
|
|
67
|
+
class="scroll-wrapper"
|
|
68
|
+
:scroll-y="true"
|
|
69
|
+
:enable-back-to-top="enableBackToTop"
|
|
70
|
+
:scroll-top="scrollTop"
|
|
71
|
+
:lower-threshold="lowerThreshold"
|
|
72
|
+
@scroll="handleScroll"
|
|
73
|
+
@scrolltolower="handleScrollToLower"
|
|
74
|
+
>
|
|
75
|
+
<slot></slot>
|
|
76
|
+
|
|
77
|
+
<!-- 使用 u-loadmore 组件实现上拉加载更多 -->
|
|
78
|
+
<u-loadmore
|
|
79
|
+
v-if="showLoadmore"
|
|
80
|
+
v-bind="loadmoreProps"
|
|
81
|
+
/>
|
|
82
|
+
</scroll-view>
|
|
83
|
+
|
|
84
|
+
<view v-else>
|
|
85
|
+
<slot></slot>
|
|
86
|
+
|
|
87
|
+
<!-- 使用 u-loadmore 组件实现上拉加载更多 -->
|
|
88
|
+
<u-loadmore
|
|
89
|
+
v-if="showLoadmore"
|
|
90
|
+
v-bind="loadmoreProps"
|
|
91
|
+
/>
|
|
92
|
+
</view>
|
|
66
93
|
</view>
|
|
67
94
|
</view>
|
|
68
95
|
</template>
|
|
@@ -90,6 +117,39 @@ export default {
|
|
|
90
117
|
maxDistance: {
|
|
91
118
|
type: Number,
|
|
92
119
|
default: 100
|
|
120
|
+
},
|
|
121
|
+
// 是否显示加载更多
|
|
122
|
+
showLoadmore: {
|
|
123
|
+
type: Boolean,
|
|
124
|
+
default: false
|
|
125
|
+
},
|
|
126
|
+
// u-loadmore 组件的 props 配置
|
|
127
|
+
loadmoreProps: {
|
|
128
|
+
type: Object,
|
|
129
|
+
default: () => ({
|
|
130
|
+
status: 'loadmore',
|
|
131
|
+
loadmoreText: '加载更多',
|
|
132
|
+
loadingText: '正在加载...',
|
|
133
|
+
nomoreText: '没有更多了'
|
|
134
|
+
})
|
|
135
|
+
},
|
|
136
|
+
// 是否使用 scroll-view 包装内容
|
|
137
|
+
useScrollView: {
|
|
138
|
+
type: Boolean,
|
|
139
|
+
default: true
|
|
140
|
+
},
|
|
141
|
+
// scroll-view 相关属性
|
|
142
|
+
enableBackToTop: {
|
|
143
|
+
type: Boolean,
|
|
144
|
+
default: false
|
|
145
|
+
},
|
|
146
|
+
lowerThreshold: {
|
|
147
|
+
type: [Number, String],
|
|
148
|
+
default: 50
|
|
149
|
+
},
|
|
150
|
+
scrollTop: {
|
|
151
|
+
type: [Number, String],
|
|
152
|
+
default: 0
|
|
93
153
|
}
|
|
94
154
|
},
|
|
95
155
|
data() {
|
|
@@ -106,6 +166,7 @@ export default {
|
|
|
106
166
|
contentTranslateY: 0
|
|
107
167
|
}
|
|
108
168
|
},
|
|
169
|
+
emits: ['refresh', 'loadmore', 'scroll'],
|
|
109
170
|
watch: {
|
|
110
171
|
refreshing: {
|
|
111
172
|
handler(newVal) {
|
|
@@ -136,7 +197,7 @@ export default {
|
|
|
136
197
|
const diff = this.currentY - this.startY
|
|
137
198
|
|
|
138
199
|
// 只有在顶部且下拉时才触发下拉刷新
|
|
139
|
-
if (diff > 0) {
|
|
200
|
+
if (diff > 0 && this.isScrollViewAtTop()) {
|
|
140
201
|
this.refreshDistance = Math.min(diff * this.damping, this.maxDistance)
|
|
141
202
|
this.contentTranslateY = this.refreshDistance
|
|
142
203
|
|
|
@@ -184,6 +245,26 @@ export default {
|
|
|
184
245
|
resetRefresh() {
|
|
185
246
|
this.refreshDistance = 0
|
|
186
247
|
this.contentTranslateY = 0
|
|
248
|
+
},
|
|
249
|
+
|
|
250
|
+
// 检查 scroll-view 是否在顶部
|
|
251
|
+
isScrollViewAtTop() {
|
|
252
|
+
// 这里可以更精确地判断，但简单起见直接返回 true
|
|
253
|
+
// 实际项目中可能需要通过 scroll 事件获取 scrollTop 判断
|
|
254
|
+
return true
|
|
255
|
+
},
|
|
256
|
+
|
|
257
|
+
// 处理滚动事件
|
|
258
|
+
handleScroll(e) {
|
|
259
|
+
this.$emit('scroll', e)
|
|
260
|
+
},
|
|
261
|
+
|
|
262
|
+
// 处理滚动到底部事件
|
|
263
|
+
handleScrollToLower(e) {
|
|
264
|
+
// 只有当 loadmore 状态为 loadmore 时才触发
|
|
265
|
+
if (this.showLoadmore && this.loadmoreProps.status === 'loadmore') {
|
|
266
|
+
this.$emit('loadmore')
|
|
267
|
+
}
|
|
187
268
|
}
|
|
188
269
|
}
|
|
189
270
|
}
|
|
@@ -213,6 +294,10 @@ export default {
|
|
|
213
294
|
transition: transform 0.2s ease-out;
|
|
214
295
|
}
|
|
215
296
|
|
|
297
|
+
.scroll-wrapper {
|
|
298
|
+
height: 100%;
|
|
299
|
+
}
|
|
300
|
+
|
|
216
301
|
.refresh-content {
|
|
217
302
|
display: flex;
|
|
218
303
|
flex-direction: column;
|
|
@@ -262,4 +347,4 @@ export default {
|
|
|
262
347
|
font-size: 14px;
|
|
263
348
|
color: #666;
|
|
264
349
|
}
|
|
265
|
-
</style>
|
|
350
|
+
</style>
|
package/package.json
CHANGED