完善筛选组件与无限滚动组件

Tevin

2021-04-02 73d4022530530be074c48a978ff6d489134bc8e4

完善筛选组件与无限滚动组件

 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);
            }
        },
    },
};

 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;

 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() {
        // 开启自动初始化

 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;