From 73d4022530530be074c48a978ff6d489134bc8e4 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 02 Apr 2021 11:00:01 +0800
Subject: [PATCH] 完善筛选组件与无限滚动组件
---
plugins/infiniteScroll/cInfiniteScroll.scss | 2
plugins/filter/CFilterSelect.vue | 11 ++++-
plugins/filter/CFilter.vue | 33 +++++++++++-----
plugins/infiniteScroll/CInfiniteScroll.vue | 17 ++++++--
4 files changed, 45 insertions(+), 18 deletions(-)
diff --git a/plugins/filter/CFilter.vue b/plugins/filter/CFilter.vue
index 51b0e7c..b02de13 100644
--- a/plugins/filter/CFilter.vue
+++ b/plugins/filter/CFilter.vue
@@ -20,7 +20,7 @@
</view>
<view
class="c-filter-more"
- :class="itemsChanged?'on':''"
+ :class="itemsFilled?'on':''"
v-if="items && items.length > 0"
@tap="evt => handleOpen()"
>
@@ -105,6 +105,9 @@
return {
filterRes: {},
drawerShow: false,
+ // 面板项有已选
+ itemsFilled: false,
+ // 本次打开是否有改变
itemsChanged: false,
};
},
@@ -117,32 +120,40 @@
this.onChange(this.filterRes);
},
handleItemChange(name, value) {
- this.handleBarChange(name, value);
- if (value || typeof value !== 'undefined') {
- this.itemsChanged = true;
- } else {
+ console.log(name, value);
+ this.$set(this.filterRes, name, value);
+ this.itemsChanged = true;
+ // 如果变化值不为空
+ if (typeof value !== 'undefined') {
+ this.itemsFilled = true;
+ }
+ // 为空是检查所有面板值是否为空
+ else {
let valuehas = false;
- for (let item of items) {
- if (
- this.filterRes[item.name] ||
- typeof this.filterRes[item.name] !== 'undefined'
- ) {
+ for (let item of this.items) {
+ if (typeof this.filterRes[item.name] !== 'undefined') {
valuehas = true;
break;
}
}
- this.itemsChanged = valuehas;
+ this.itemsFilled = valuehas;
}
},
handleClean() {
Object.keys(this.filterRes).forEach(key => {
this.filterRes[key] = [][0];
});
+ this.itemsFilled = false;
this.itemsChanged = false;
this.onChange(this.filterRes);
},
handleFinish() {
this.drawerShow = false;
+ // 有项目改变时，发送变化
+ if (this.itemsChanged) {
+ this.itemsChanged = false;
+ this.onChange(this.filterRes);
+ }
},
},
};
diff --git a/plugins/filter/CFilterSelect.vue b/plugins/filter/CFilterSelect.vue
index fbbe7ff..2a80ff5 100644
--- a/plugins/filter/CFilterSelect.vue
+++ b/plugins/filter/CFilterSelect.vue
@@ -16,6 +16,7 @@
mode="selector"
range-key="name"
:range="options2"
+ :value="current"
@change="evt=>handleChange(evt.detail.value)"
>
<view class="content">
@@ -42,7 +43,10 @@
props: {
type: String,
label: String,
- options: Array,
+ options: {
+ type: Array,
+ default: [],
+ },
value: null,
onChange: Function,
},
@@ -59,9 +63,12 @@
return i;
}
}
- return -1;
+ return 0;
},
selected() {
+ if (typeof this.value === 'undefined') {
+ return false;
+ }
for (let item of this.options) {
if (this.value === item.value) {
return true;
diff --git a/plugins/infiniteScroll/CInfiniteScroll.vue b/plugins/infiniteScroll/CInfiniteScroll.vue
index 19504bd..9792580 100644
--- a/plugins/infiniteScroll/CInfiniteScroll.vue
+++ b/plugins/infiniteScroll/CInfiniteScroll.vue
@@ -35,12 +35,16 @@
</view>
</view>
</view>
- <slot />
+ <view class="c-infinite-content">
+ <slot />
+ </view>
<view class="c-infinite-bottom">
<view
class="c-infinite-loading"
- v-if="loading"
- >加载中，请稍后...</view>
+ v-if="!ending"
+ >
+ <text v-show="loading">加载中，请稍后...</text>
+ </view>
<view v-if="ending">
<text
class="c-infinite-ended"
@@ -73,7 +77,7 @@
// 发起加载页面数据回调
// 参数 {
// current: 当前页页码,
- // next: 需要到达的页面页码,
+ // next: 需要加载的页面页码,
// success: 当加载成功后页面调用, 回传参数 { pageTotal: 当前翻页总页数 }
// fail: 加载失败后页面调用
// }
@@ -288,6 +292,11 @@
}
}
},
+ refresh() {
+ this.ending = false;
+ this.current = 0;
+ this.hanldeLoadMore();
+ },
},
mounted() {
// 开启自动初始化
diff --git a/plugins/infiniteScroll/cInfiniteScroll.scss b/plugins/infiniteScroll/cInfiniteScroll.scss
index 797defb..41e7f5d 100644
--- a/plugins/infiniteScroll/cInfiniteScroll.scss
+++ b/plugins/infiniteScroll/cInfiniteScroll.scss
@@ -31,7 +31,6 @@
.text {
vertical-align: middle;
}
- background-color: #fcfcfc;
}
.tips {
.text:nth-child(3) {
@@ -60,6 +59,7 @@
}
}
.c-infinite-bottom {
+ padding-bottom: 20px;
text-align: center;
.c-infinite-loading {
height: 94px;
--
Gitblit v1.9.1