Authored by yyq

filter fixed

... ... @@ -37,11 +37,12 @@ Page({
query.select('.container .top-search').boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(res => {
this.filterInitialTop = res[0].top;
this.topSearchHeight = res[1].bottom - res[1].top;
this.resetListScrollPos = res[0].top - (res[1].bottom - res[1].top);
const [filter, search, scroll] = res;
this.onPageScroll({scrollTop: res[2].scrollTop});
this.maxScrollTop = filter.top + scroll.scrollTop - search.bottom + search.top;
this.resetListScrollPos = this.maxScrollTop;
this.onPageScroll({scrollTop: scroll.scrollTop});
})
}, 1000);
},
... ... @@ -75,19 +76,22 @@ Page({
},
onPageScroll: function(e) {
const { scrollTop } = e;
const floatFilter = scrollTop > this.filterInitialTop - this.topSearchHeight;
const floatFilter = scrollTop > this.maxScrollTop;
const show = scrollTop > windowHeight * 2;
let data;
if (floatFilter !== this.data.floatFilter) {
this.setData({floatFilter});
data = data || {};
data.floatFilter = floatFilter;
}
if (show !== this.data.showBackTop) {
this.setData({
showBackTop: show
});
data = data || {};
data.showBackTop = show;
}
data && this.setData(data);
},
sortChange: function (e) {
let params;
... ...
... ... @@ -13,11 +13,12 @@
floor-index="1" refresh="{{pullRefresh}}"></resources>
<view class="separator"></view>
<view class="recommend-product">
<view class="list-head">
<view-title title="推荐商品" height="88"></view-title>
<view class="filter {{floatFilter ? 'float' : ''}}">
<product-list-filter bind:sortchange="sortChange"></product-list-filter>
</view>
<view wx:if="{{floatFilter}}" class="float-holder"></view>
</view>
<view class="list">
<product-list
list="{{productList}}"
... ...
... ... @@ -59,24 +59,26 @@
margin-top: -15rpx;
}
.recommend-product .list-head {
padding-bottom: 92rpx;
}
.recommend-product .filter {
position: relative;
width: 100%;
height: 92rpx;
position: absolute;
border-top: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
box-sizing: border-box;
background-color: #fff;
}
.recommend-product .filter.float {
position: fixed;
top: 103rpx;
left: 0;
right: 0;
z-index: 1000;
}
.recommend-product .float-holder {
height: 92rpx;
}
.recommend-product .list {
padding-bottom: 90rpx;
}
... ...