Skip to content

M
mayi-mp-shop
Commit 1c48ebd8 by 李嘉林
Options

商品列表滚动加载

parent 774db429
Showing with 178 additions and 75 deletions
src/pages/home/index.vue
<template>
<div class="domain">
<!-- <goods-list id="goodsList"></goods-list> -->
<scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;" scroll-y="true">
<div v-for="(item,index) in pageData" :key="index">
<div v-if="item.componentCode=='banner'">
<banner :datas="item"></banner>
</div>
<div v-else-if="item.componentCode=='goods-list'">
<goods-list :datas="item"></goods-list>
<div v-else-if="item.componentCode=='goods-list'" style="height:100%;">
<goods-list class="goodsListItem" :datas="item"></goods-list>
</div>
</div>
</scroll-view>
<!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image>
......@@ -49,6 +51,13 @@ export default {
this.pageData = JSON.parse(this.pageInfo.pageData);
console.log('36',this.pageData)
},
scrolls(el){
console.log('scroll')
this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
},
scrolltolower(){
console.log("scrolltolower")
}
},
};
</script>
......
static/nativeComponents/GoodsList/GoodsItem/index.wxml
......@@ -71,7 +71,11 @@
<!-- 商品详情 -->
<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="info-top flex">
<view class="name" wx:if="{{datas.componentData['nameShow']}}">
<view
class="name"
wx:if="{{datas.componentData['nameShow']}}"
style="color:{{datas.componentData['nameColor']}};font-weight:{{datas.componentData['nameFontWeight']}};font-size:{{datas.componentData['nameFontSize']}}em;"
>
{{items!=null?items['productName']:'名称'}}
</view>
<view
......
static/nativeComponents/GoodsList/index.js
......@@ -16,7 +16,10 @@ const componentOptions = {
isPageHidden: false, // 页面是否处于隐藏状态
titleIcon: "",
classificationLoadPage: 1,
classificationLoadNum: 10
classificationLoadNum: 10,
queryProductInfoLoading: false,
loading: false,
finished: false
},
// 数据监听器
observers: {},
......@@ -65,7 +68,9 @@ const componentOptions = {
titleIcon
} = this.data.datas.componentData;
angleSignImg = DFSImg(angleSignImg);
if (titleIcon) {
titleIcon = DFSImg(titleIcon);
}
this.setData({
"data.datas.componentData.angleSignImg": angleSignImg,
titleIcon
......@@ -91,39 +96,35 @@ const componentOptions = {
},
getProductList(code, type) {
let { goodsList, goodsSort } = this.data.datas.componentData;
let { classificationLoadPage,loading,finished,queryProductInfoLoading } = this.data;
if (queryProductInfoLoading == true) {
return;
}
this.setData({ queryProductInfoLoading: true });
// type 1初始化 2滚动加载
//分类查
if (code == 1) {
let query = {
categoryId: this.data.datas.componentData.categoryId,
page: this.showRowNum()
? 1
: this.data.datas.componentData.classificationLoadPage, // 当前页
rows: this.showRowNum()
? this.getItemNum()
: this.classificationLoadNum, // 一页多少条
sortColumn: this.data.datas.componentData.goodsSort,
sortType: this.data.datas.componentData.goodsSort != 2 ? 1 : 0,
whetherShowSoldOutGoods: this.data.datas.componentData
.whetherShowSoldOutGoods, //查询销售数量
whetherQueryCollectCount: true, //查询收藏数
whetherUseVirtualSalesQty: true, //是否使用虚拟销售数量
whetherUseVirtualCollectCount: true, //是否使用虚拟收藏人数
whetherFindDistributionCommission: this
.whetherFindDistributionCommission, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice
? 1
: 0, //是否查询会员价 1是 0否
whetherShowGoodsDefaultTagFlag: this.data.datas.componentData
.marketingTag
? 1
: 0, //是否展示营销标签 1是 0否
whetherFindMultiShopFlag: 1 //是否查询多商户 //商城使用
};
if (type == 1) {
classificationLoadPage = 1;
} else {
classificationLoadPage++;
loading = true;
}
this.setData({ classificationLoadPage, loading });
let query = { categoryId: this.data.datas.componentData.categoryId, page: this.showRowNum() ? classificationLoadPage : 1, rows: this.showRowNum() ? this.data.classificationLoadNum:this.getItemNum(), sortColumn: goodsSort, sortType: goodsSort != 2 ? 1 : 0, whetherShowSoldOutGoods: this.data.datas.componentData.whetherShowSoldOutGoods, whetherQueryCollectCount: true, whetherUseVirtualSalesQty: true, whetherUseVirtualCollectCount: true, whetherFindDistributionCommission: this.whetherFindDistributionCommission, whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice ? 1 : 0, whetherShowGoodsDefaultTagFlag: this.data.datas.componentData.marketingTag ? 1 : 0, whetherFindMultiShopFlag: 1 }; // 当前页 // 一页多少条 //查询销售数量 //查询收藏数 //是否使用虚拟销售数量 //是否使用虚拟收藏人数 //是否查询商品佣金（0：不查询，1：展示，为空不查佣金） //是否查询会员价 1是 0否 //是否展示营销标签 1是 0否 //是否查询多商户 //商城使用
goodsApi.queryProductInfo(query).then(res => {
this.setData({ loading: false, queryProductInfoLoading:false });
if (res.data.code == 200) {
let goodsList = res.data.data.list;
this.goodsListVal(goodsList);
let goodsLists = res.data.data.list;
if (type == 1) {
goodsList = goodsLists;
} else {
goodsList = [...goodsList, ...goodsLists];
}
if (goodsLists && goodsLists.length < 10) {
this.setData({ finished:true });
}
this.goodsListVal(goodsList,type);
}
});
} else {
......@@ -177,13 +178,13 @@ const componentOptions = {
goodsApi.queryMoreProductInfo(moreQuery).then(res => {
if (res.data.code == 200) {
goodsList = res.data.data;
this.goodsListVal(goodsList);
this.goodsListVal(goodsList,1);
}
});
},
goodsListVal(goodsList) {
console.log(goodsList,"------------goodsListVal")
goodsList.forEach((item,index) => {
goodsListVal(goodsList,type) {
console.log(goodsList, "------------goodsListVal");
goodsList.forEach((item, index) => {
item.marketingTag = item.defaultTags
? this.filtermark(
item.defaultTags,
......@@ -191,21 +192,21 @@ const componentOptions = {
)
: [];
item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.coverImage = DFSImg(item.coverImage);
item.productImgUrl = DFSImg(item.productImgUrl);
item.coverImage = DFSImg(item.coverImage,100,100,0);
item.productImgUrl = DFSImg(item.productImgUrl, 100, 100, 0);
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = Number(item.saleQty);
item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable?
Number(item.minPriceAfterRecommendedCardPriceTable):"";
item.minProductGoodsCommission = item.minProductGoodsCommission?
Number(item.minProductGoodsCommission).toFixed(2) : 0;
item.minGoodsSuggestedRetailPrice = item
.minGoodsSuggestedRetailPrice?Number(
item.minGoodsSuggestedRetailPrice
)
.toFixed(2) : "";
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable)
: "";
item.minProductGoodsCommission = item.minProductGoodsCommission
? Number(item.minProductGoodsCommission).toFixed(2)
: 0;
item.minGoodsSuggestedRetailPrice = item.minGoodsSuggestedRetailPrice
? Number(item.minGoodsSuggestedRetailPrice).toFixed(2)
: "";
item.showVipPrice = this.showVipPrice(item, index);
item.showVipTag = this.showVipTag(item, index);
if (item.saleTime) {
......@@ -217,9 +218,17 @@ const componentOptions = {
this.setData({
"datas.componentData.goodsList": goodsList
});
if (type == 1) {
// 初始化
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").initList();
}
} else {
// 滚动加载
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").reLoadPro();
}
}
}, 0);
},
getSaleTime(val) {
......@@ -249,9 +258,9 @@ const componentOptions = {
}
},
showRowNum() {
return !(
return (
this.data.datas.componentData.moreShow == false &&
this.data.datas.componentData.getStyle == "waterfall" &&
this.data.datas.componentData.style == "waterfall" &&
this.data.datas.componentData.goodsSource == "classify"
);
},
......@@ -278,21 +287,33 @@ const componentOptions = {
}
return showFlag;
},
showVipTag(item,index) {
showVipTag(item, index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = item["minPriceAfterRecommendedCardPriceTable"];
let showTag = item["recommendedCardMinPricePriceTableName"];
if (
vipPrice &&
showTag &&
Number(vipPrice) <= Number(item["minPrice"])
) {
if (vipPrice && showTag && Number(vipPrice) <= Number(item["minPrice"])) {
showFlag = true;
}
return showFlag;
},
getScroll(el) {
// 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData;
if (
goodsSource == "classify" &&
moreShow == false &&
style == "waterfall"
) {
this.selectComponent("#waterfallFlow").getScroll(el);
}
},
// 分页加载
onLoad() {
console.log("---触发分页加载");
this.getProductList(1,2);
}
}
};
Component(componentOptions);
static/nativeComponents/GoodsList/index.wxml
......@@ -63,6 +63,9 @@
datas="{{datas}}"
padding="{{datas.componentData.proGap}}"
wx:if="{{datas.componentData.goodsList}}"
bindonLoad="onLoad"
loading="{{loading}}"
finished="{{finished}}"
></waterfall-flow>
</view>
<!-- 横向列表 -->
......
static/nativeComponents/module/WaterfallFlow/index.js
......@@ -13,8 +13,17 @@ Component({
},
padding: {
type: Number
},
loading: {
type: Boolean
},
finished: {
type: Boolean
}
},
onPageScroll(e) {
console.log(e);
},
lifetimes: {
created() {
console.log("进入组件created");
......@@ -26,7 +35,14 @@ Component({
},
ready() {
console.log("进入组件ready");
// this.reLoadPro();
let _this = this;
let { clientHeight } = this.data;
wx.getSystemInfo({
success: function(res) {
let clientHeight = parseInt(res.windowHeight);
_this.setData({ clientHeight });
}
});
}
},
observers: {},
......@@ -36,50 +52,71 @@ Component({
//列高度数组
waterfallDeviationHeight: [0, 0],
contentList: [],
inj: 0
inj: 0,
clientHeight: 0, //窗口高度
goodsNum:0,
},
methods: {
// 初始化数组
initList() {
// 初始化容器
let contentList = this.data.contentList;
let { contentList, waterfallDeviationHeight } = this.data;
contentList[0] = [];
contentList[1] = [];
this.setData({ contentList });
waterfallDeviationHeight = [0,0];
this.setData({ contentList, waterfallDeviationHeight });
console.log(this.data.note, "-------------------185");
this.reLoadPro();
},
async reLoadPro() {
let _this = this;
this.setHeight(0);
this.setHeight(this.data.goodsNum);
this.setData({ goodsNum:this.data.note.length>0?this.data.note.length+1:0 });
},
setHeight(i) {
let _this = this;
let item = this.data.note[i];
console.log(i, "---------------i");
console.log(
this.data.waterfallDeviationHeight,
"-------waterfallDeviationHeight"
);
// console.log(i, "---------------i");
// console.log(
// this.data.waterfallDeviationHeight,
// "-------waterfallDeviationHeight"
// );
let minIndex = this.filterMin();
console.log(minIndex, "---------------126");
// console.log(minIndex, "---------------126");
let contentList = this.data.contentList;
contentList[minIndex].push(item);
this.setData({ contentList });
const queryDom = wx.createSelectorQuery().in(this);
queryDom.select(`.item${minIndex}`).boundingClientRect();
queryDom.exec(res => {
res[0].height;
console.log(res[0], "--------------res");
_this
.createSelectorQuery()
.select(`.item${minIndex}`)
.boundingClientRect(function(res) {
if (res) {
res.height;
console.log(res, "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
waterfallDeviationHeight[minIndex] = res[0].height;
waterfallDeviationHeight[minIndex] = res.height;
_this.setData({ waterfallDeviationHeight });
if (i >= _this.data.note.length - 1) {
return;
}
i++;
_this.setHeight(i);
});
}
})
.exec();
// const queryDom = wx.createSelectorQuery().in(this);
// queryDom.select(`.item${minIndex}`).boundingClientRect();
// queryDom.exec(res => {
// res[0].height;
// console.log(res[0], "--------------res");
// let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
// waterfallDeviationHeight[minIndex] = res[0].height;
// _this.setData({ waterfallDeviationHeight });
// if (i >= _this.data.note.length - 1) {
// return;
// }
// i++;
// _this.setHeight(i);
// });
},
filterMin() {
let val = Math.min.apply(null, this.data.waterfallDeviationHeight);
......@@ -101,6 +138,26 @@ Component({
ev.target.dataset.id,
"-----------------------219"
);
},
getScroll(el) {
let { finished } = this.properties;
let _this = this;
_this
.createSelectorQuery()
.select("#waterfallFlow")
.boundingClientRect(function(res) {
if (res) {
console.log(el, "-------------118");
console.log(res, "---------------35");
let scrollTop = parseInt(el.target.scrollTop);
let domHeight = parseInt(res.height);
// 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
if (scrollTop + _this.data.clientHeight >= domHeight - 150 && finished == false) {
_this.triggerEvent("onLoad");
}
}
})
.exec();
}
}
});
static/nativeComponents/module/WaterfallFlow/index.wxml
<!--瀑布流组件-->
<view class="waterfallFlow" style="--proGap:{{padding}}rpx">
<view
class="waterfallFlow"
id="waterfallFlow"
style="--proGap:{{padding}}rpx"
>
<view class="container flex">
<view
wx:for="{{contentList}}"
......@@ -21,5 +25,10 @@
</view>
</view>
</view>
<!-- 上拉加载底部展示 -->
<view class="loadBottom" wx:if="{{datas.componentData.goodsSource == 'classify' && datas.componentData.moreShow == false &&datas.componentData.style == 'waterfall'}}">
<text wx:if="{{loading}}">加载中~</text>
<text wx:if="{{ finished}}">暂无更多</text>
</view>
</view>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment