mkm/new_shop_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

滚动优化 厉害云仓

Browse Source
This commit is contained in:
1154079537 2024-05-14 17:23:18 +08:00
parent 11f1a0df0b
commit cb25c68306
5 changed files with 80 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages.json
View File

@ -334,7 +334,7 @@
"style": { "style": {
"navigationBarTitleText": "里海云仓", "navigationBarTitleText": "里海云仓",
"navigationStyle": "custom", "navigationStyle": "custom",
"enablePullDownRefresh": true "enablePullDownRefresh": false
} }
}, },
{ {

30
pages/cloud_warehouse/home/home.vue
View File

@ -307,11 +307,12 @@
<view class="wholeSale-con" <view class="wholeSale-con"
:style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}"> :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}">
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;" <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@scrolltoupper="scrolltoupper" :refresher-threshold="0"> :refresher-enabled="true" :refresher-triggered="isTriggered" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" :refresher-threshold="45" :scroll-anchoring='true'>
<view> <view>
<!-- 流水瀑布 --> <!-- 流水瀑布 -->
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" /> <WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
<loadmore :type="isLoading" style="margin-bottom:20rpx ;"></loadmore> <loadmore :type="isLoading" style="background-color: #fff;padding: 12rpx 0;"></loadmore>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -375,6 +376,7 @@
wrapHeight: 300, wrapHeight: 300,
isShowSmall: false, isShowSmall: false,
scrollTop: 0, scrollTop: 0,
isTriggered: true
} }
}, },
onLoad(option) { onLoad(option) {
@ -399,20 +401,27 @@
} }
}, },
methods: { methods: {
onAllCategory() { // 下拉加载
this.$refs.popup.open(); onPulling() {
if (!this.isTriggered) {
this.isTriggered = true;
this.getProductslist(true);
}
}, },
onRefresh(e) {
scrolltoupper() { this.isTriggered = true;
this.getProductslist(true);
}, },
onScrollBottom(e) { onScrollBottom(e) {
this.getProductslist(); this.getProductslist();
}, },
onAllCategory() {
this.$refs.popup.open();
},
onScroll(e) { onScroll(e) {
if (this.scrollTop >= e.target.scrollTop) { //上拉 if (this.scrollTop > e.target.scrollTop) { //上拉
this.wrapHeight = 300; this.wrapHeight = 300;
if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48; if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
} else { } else {
@ -453,6 +462,7 @@
this.$refs.popup && this.$refs.popup.close(); this.$refs.popup && this.$refs.popup.close();
}, },
changeChildrenCate(e) { changeChildrenCate(e) {
this.cate_change_children = e; this.cate_change_children = e;
this.where.cate_pid = this.store_category_children[e].store_category_id; this.where.cate_pid = this.store_category_children[e].store_category_id;
@ -486,13 +496,13 @@
getProductslist(this.where).then(res => { getProductslist(this.where).then(res => {
this.where.limit = res.data.limit this.where.limit = res.data.limit
this.where.page = res.data.page this.where.page = res.data.page
uni.stopPullDownRefresh(); this.isTriggered = false;
this.hostProduct = [...this.hostProduct, ...res.data.list]; this.hostProduct = [...this.hostProduct, ...res.data.list];
this.isLoading = 0; this.isLoading = 0;
if (res.data.list.length < this.where.limit) this.isLoading = -1; if (res.data.list.length < this.where.limit) this.isLoading = -1;
this.where.page++; this.where.page++;
}).catch(err => { }).catch(err => {
uni.stopPullDownRefresh(); this.isTriggered = false;
}) })
}, },
goDetail(item) { goDetail(item) {

35
pages/cloud_warehouse/market/market.vue
View File

@ -69,7 +69,8 @@
<!-- 列表 --> <!-- 列表 -->
<view class="goods_list" :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx)'}"> <view class="goods_list" :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx)'}">
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;" <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@scrolltoupper="scrolltoupper" :refresher-threshold="0"> :refresher-enabled="true" :refresher-triggered="isTriggered" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" :refresher-threshold="45" :scroll-anchoring='true'>
<view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)"> <view class="goods" v-for="(item, index) in goodsList" :key="index" @click="goStore(item.mer_id)">
<view class="avatar"> <view class="avatar">
<u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill"> <u--image width="160rpx" height="160rpx" :src="item.mer_avatar" mode="aspectFill">
@ -113,7 +114,7 @@
</view> </view>
</view> </view>
</view> </view>
<loadmore :type="isLoading"></loadmore> <loadmore :type="isLoading" style="background-color: #fff;padding: 12rpx 0;"></loadmore>
</scroll-view> </scroll-view>
</view> </view>
@ -193,6 +194,7 @@
}, },
wrapHeight: 300, wrapHeight: 300,
scrollTop: 0, scrollTop: 0,
isTriggered: false
} }
}, },
computed: { computed: {
@ -219,30 +221,32 @@
this.merClassifly(); this.merClassifly();
this.storeMerchantList(); this.storeMerchantList();
}, },
onReachBottom() {
// this.storeMerchantList();
},
onPageScroll() { onPageScroll() {
uni.$emit('scroll'); uni.$emit('scroll');
}, },
onPullDownRefresh() {
// this.storeMerchantList(true);
},
methods: { methods: {
onAllCategory() { // 下拉加载
this.$refs.popup.open(); onPulling() {
if (!this.isTriggered) {
this.isTriggered = true;
this.storeMerchantList(true);
}
}, },
scrolltoupper() { onRefresh(e) {
this.storeMerchantList(true); this.isTriggered = true;
}, },
onScrollBottom(e) { onScrollBottom(e) {
this.storeMerchantList(); this.storeMerchantList();
}, },
onAllCategory() {
this.$refs.popup.open();
},
onScroll(e) { onScroll(e) {
if (this.scrollTop >= e.target.scrollTop) { //上拉 if (this.scrollTop > e.target.scrollTop) { //上拉
this.wrapHeight = 300; this.wrapHeight = 300;
} else { } else {
this.wrapHeight = 0; this.wrapHeight = 0;
@ -299,13 +303,13 @@
if (this.isLoading == -1) return; if (this.isLoading == -1) return;
this.isLoading = 1; this.isLoading = 1;
storeMerchantList(this.where).then(res => { storeMerchantList(this.where).then(res => {
uni.stopPullDownRefresh(); this.isTriggered = false;
this.goodsList = [...this.goodsList, ...res.data.list]; this.goodsList = [...this.goodsList, ...res.data.list];
this.isLoading = 0; this.isLoading = 0;
if (res.data.list.length < this.where.limit) this.isLoading = -1; if (res.data.list.length < this.where.limit) this.isLoading = -1;
this.where.page++; this.where.page++;
}).catch(() => { }).catch(() => {
uni.stopPullDownRefresh(); this.isTriggered = false;
}) })
}, },
closeShowAddress() { closeShowAddress() {
@ -683,7 +687,6 @@
.score-title { .score-title {
margin-right: 15rpx; margin-right: 15rpx;
} }
.score_text { .score_text {

37
pages/cloud_warehouse/specialty/specialty.vue
View File

@ -65,11 +65,12 @@
<!-- 内容 --> <!-- 内容 -->
<view class="wholeSale-con" :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx )'}"> <view class="wholeSale-con" :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx )'}">
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;" <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@scrolltoupper="scrolltoupper" :refresher-threshold="0"> :refresher-enabled="true" :refresher-triggered="isTriggered" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" :refresher-threshold="45" :scroll-anchoring='true'>
<view> <view>
<!-- 流水瀑布 --> <!-- 流水瀑布 -->
<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" /> <WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
<loadmore :type="isLoading"></loadmore> <loadmore :type="isLoading" style="background-color: #fff;padding: 12rpx 0;"></loadmore>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -132,36 +133,38 @@
}, },
wrapHeight: 300, wrapHeight: 300,
scrollTop: 0, scrollTop: 0,
isTriggered: true
} }
}, },
onLoad(option) { onLoad(option) {
this.getCategoryIndexList(); this.getCategoryIndexList();
this.getProductslist(true); this.getProductslist(true);
}, },
onReachBottom() {
// this.getProductslist();
},
onPageScroll() { onPageScroll() {
uni.$emit('scroll'); uni.$emit('scroll');
}, },
onPullDownRefresh() {
// this.getProductslist(true);
},
methods: { methods: {
onAllCategory() { // 下拉加载
this.$refs.popup.open(); onPulling() {
if (!this.isTriggered) {
this.isTriggered = true;
this.getProductslist(true);
}
}, },
onRefresh(e) {
scrolltoupper() { this.isTriggered = true;
this.getProductslist(true);
}, },
onScrollBottom(e) { onScrollBottom(e) {
this.getProductslist(); this.getProductslist();
}, },
onAllCategory() {
this.$refs.popup.open();
},
onScroll(e) { onScroll(e) {
if (this.scrollTop >= e.target.scrollTop) { //上拉 if (this.scrollTop > e.target.scrollTop) { //上拉
this.wrapHeight = 300; this.wrapHeight = 300;
} else { } else {
this.wrapHeight = 0; this.wrapHeight = 0;
@ -182,6 +185,7 @@
} }
}) })
}, },
navBack() { navBack() {
uni.navigateBack(); uni.navigateBack();
}, },
@ -202,6 +206,7 @@
this.$refs.popup && this.$refs.popup.close(); this.$refs.popup && this.$refs.popup.close();
this.$forceUpdate(); this.$forceUpdate();
}, },
changeChildrenCate(e) { changeChildrenCate(e) {
this.cate_change_children = e; this.cate_change_children = e;
this.where.cate_pid = this.store_category_children[e].store_category_id; this.where.cate_pid = this.store_category_children[e].store_category_id;
@ -236,13 +241,13 @@
if (this.isLoading == -1) return; if (this.isLoading == -1) return;
this.isLoading = 1; this.isLoading = 1;
getProductslist(this.where).then(res => { getProductslist(this.where).then(res => {
uni.stopPullDownRefresh(); this.isTriggered = false;
this.hostProduct = [...this.hostProduct, ...res.data.list]; this.hostProduct = [...this.hostProduct, ...res.data.list];
this.where.page++; this.where.page++;
this.isLoading = 0; this.isLoading = 0;
if (res.data.list.length < this.where.limit) this.isLoading = -1; if (res.data.list.length < this.where.limit) this.isLoading = -1;
}).catch(() => { }).catch(() => {
uni.stopPullDownRefresh(); this.isTriggered = false;
}) })
}, },
goDetail(item) { goDetail(item) {

34
pages/whole_sale/index.vue
View File

@ -140,7 +140,8 @@
<view class="wholeSale-con" <view class="wholeSale-con"
:style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}"> :style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}">
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;" <scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
@scrolltoupper="scrolltoupper" :refresher-threshold="0"> :refresher-enabled="true" :refresher-triggered="isTriggered" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" :refresher-threshold="45" :scroll-anchoring='true'>
<!-- 流水瀑布 --> <!-- 流水瀑布 -->
<WaterfallsFlow v-if="subCurr!=1 || (subCurr==1 && tabsCurr!=2)" :wfList='hostProduct' <WaterfallsFlow v-if="subCurr!=1 || (subCurr==1 && tabsCurr!=2)" :wfList='hostProduct'
@itemTap="goDetail" :type="0" :sale_type="2" /> @itemTap="goDetail" :type="0" :sale_type="2" />
@ -195,7 +196,7 @@
</view> </view>
<loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0" <loadmore :type="isLoading" v-if="isLoading || hostProduct.length > 0"
style="padding: 40rpx 0 150rpx; 0"> style="background-color: #fff;padding: 12rpx 0;">
</loadmore> </loadmore>
<view class='pictrue' v-if="!isLoading && hostProduct.length == 0"> <view class='pictrue' v-if="!isLoading && hostProduct.length == 0">
<image :src="`${domain}/static/images/noCart.png`"></image> <image :src="`${domain}/static/images/noCart.png`"></image>
@ -323,6 +324,7 @@
wrapHeight: 332, wrapHeight: 332,
isShowSmall: false, isShowSmall: false,
scrollTop: 0, scrollTop: 0,
isTriggered: false
} }
}, },
computed: { computed: {
@ -368,12 +370,6 @@
}) })
} }
}, },
// onPullDownRefresh() {
// this.initData(true, true);
// },
// onReachBottom() {
// this.initData(false, true);
// },
watch: { watch: {
'where.cate_pid'(newVal, oldVal) { 'where.cate_pid'(newVal, oldVal) {
@ -389,18 +385,26 @@
}, },
methods: { methods: {
onAllCategory() {
this.$refs.popup.open();
},
scrolltoupper() { // 下拉加载
this.initData(true, true); onPulling() {
if (!this.isTriggered) {
this.isTriggered = true;
this.initData(true, true);
}
},
onRefresh(e) {
this.isTriggered = true;
}, },
onScrollBottom(e) { onScrollBottom(e) {
this.initData(false, true); this.initData(false, true);
}, },
onAllCategory() {
this.$refs.popup.open();
},
onScroll(e) { onScroll(e) {
if (this.scrollTop >= e.target.scrollTop) { //上拉 if (this.scrollTop >= e.target.scrollTop) { //上拉
this.wrapHeight = this.tabsCurr == 2 ? 400 : 332; this.wrapHeight = this.tabsCurr == 2 ? 400 : 332;
@ -563,7 +567,7 @@
getProductslist(this.where, true).then(res => { getProductslist(this.where, true).then(res => {
this.where.limit = res.data.limit this.where.limit = res.data.limit
this.where.page = res.data.page this.where.page = res.data.page
if (stop) uni.stopPullDownRefresh(); this.isTriggered = false;
if (reLoad) this.hostProduct = []; if (reLoad) this.hostProduct = [];
this.hostProduct = [...this.hostProduct, ...res.data.list]; this.hostProduct = [...this.hostProduct, ...res.data.list];
this.isLoading = 0; this.isLoading = 0;
@ -580,7 +584,7 @@
if (this.isLoading == -1) return; if (this.isLoading == -1) return;
this.isLoading = 1; this.isLoading = 1;
storeMerchantList(this.where).then(res => { storeMerchantList(this.where).then(res => {
if (stop) uni.stopPullDownRefresh() this.isTriggered = false;
this.shopList = [...this.shopList, ...res.data.list]; this.shopList = [...this.shopList, ...res.data.list];
this.isLoading = 0; this.isLoading = 0;
if (res.data.list.length < this.where.limit) this.isLoading = -1; if (res.data.list.length < this.where.limit) this.isLoading = -1;