Skip to content

M
mayi-mp-shop
Commit 0cc72546 by 李嘉林
Options

横向标签加载修改

parent 751531f7
Showing with 209 additions and 135 deletions
src/components/basicTool/transverse-label/index.vue
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
<!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> --> <!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> -->
{{index}}------ {{index}}------
<goods-list :class="['goodsListItem','goodsListItemIndex'+index]" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list> <goods-list :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
</div> </div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1"> <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
...@@ -447,11 +447,11 @@ export default { ...@@ -447,11 +447,11 @@ export default {
item.getScroll() item.getScroll()
}) })
} }
if(this.$parent.$mp.page.selectAllComponents('.goodsListItem')){ if(this.$parent.$mp.page.selectAllComponents('.transverse-label-goodsListItem')){
// this.$parent.$mp.page.selectAllComponents('.goodsListItem').forEach(v=>{ // this.$parent.$mp.page.selectAllComponents('.transverse-label-goodsListItem').forEach(v=>{
// v.wheatherLazyloading == true // v.wheatherLazyloading == true
// }) // })
// console.log(this.$parent.$mp.page.selectAllComponents('.goodsListItem')[res.target.index].setPageDatas(res.target.index)); // console.log(this.$parent.$mp.page.selectAllComponents('.transverse-label-goodsListItem')[res.target.index].setPageDatas(res.target.index));
// console.log('setDatas'); // console.log('setDatas');
} }
this.active=res.target.index; this.active=res.target.index;
......
src/pages/home/index.vue
...@@ -698,8 +698,15 @@ export default { ...@@ -698,8 +698,15 @@ export default {
this.$mp.page.selectComponent(".getIndexHomePage").getScroll(el); this.$mp.page.selectComponent(".getIndexHomePage").getScroll(el);
} }
if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){ if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
console.log(this.$mp.page.selectAllComponents(".transverse-label-goodsListItem"),'-this.$mp.page.selectComponent(".goodsListItem")')
this.$mp.page.selectComponent(".goodsListItem").getScroll(el); this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
} }
if(this.$mp.page && this.$mp.page.selectAllComponents(".transverse-label-goodsListItem")){
this.$mp.page.selectAllComponents(".transverse-label-goodsListItem").forEach(item=>{
console.log(item,'-this.$mp.page.selectComponent(".goodsListItem")')
item.getScroll(el)
})
}
}, },
setFooterShow(el){ setFooterShow(el){
// return // return
......
static/nativeComponents/GoodsList/index.js
...@@ -10,10 +10,10 @@ const componentOptions = { ...@@ -10,10 +10,10 @@ const componentOptions = {
datas: { datas: {
type: Object type: Object
}, },
datasIndex:{ datasIndex: {
type: Number type: Number
}, },
goodsListIndex:{ goodsListIndex: {
type: Number type: Number
} }
}, },
...@@ -26,13 +26,14 @@ const componentOptions = { ...@@ -26,13 +26,14 @@ const componentOptions = {
queryProductInfoLoading: false, queryProductInfoLoading: false,
loading: false, loading: false,
finished: false, finished: false,
goodsList:[], goodsList: [],
storageGoodsList:[], storageGoodsList: [],
storageDatasList:[], storageDatasList: [],
pageSize:10, pageSize: 10,
pageNum:1, pageNum: 1,
pageGoodsList:[], pageGoodsList: [],
loadingFlag:[], loadingFlag: [],
testFlag: 0
}, },
// 数据监听器 // 数据监听器
observers: {}, observers: {},
...@@ -74,7 +75,7 @@ const componentOptions = { ...@@ -74,7 +75,7 @@ const componentOptions = {
// 组件方法 // 组件方法
methods: { methods: {
// setPageDatas(active){ // setPageDatas(active){
// this.pageGoodsList = wx.getStorageSync('pageGoodsList') // this.pageGoodsList = wx.getStorageSync('pageGoodsList')
// console.log(this.pageGoodsList,active,'active'); // console.log(this.pageGoodsList,active,'active');
// }, // },
...@@ -85,7 +86,7 @@ const componentOptions = { ...@@ -85,7 +86,7 @@ const componentOptions = {
angleSignImg, angleSignImg,
titleIcon titleIcon
} = this.data.datas.componentData; } = this.data.datas.componentData;
angleSignImg = DFSImg(angleSignImg,150,150,1); angleSignImg = DFSImg(angleSignImg, 150, 150, 1);
if (titleIcon) { if (titleIcon) {
titleIcon = DFSImg(titleIcon); titleIcon = DFSImg(titleIcon);
} }
...@@ -201,14 +202,16 @@ const componentOptions = { ...@@ -201,14 +202,16 @@ const componentOptions = {
return element.terminalProductId; return element.terminalProductId;
}); });
let storageIds = wx.getStorageSync('ids') let storageIds = wx.getStorageSync("ids");
storageIds[this.data.goodsListIndex] = ids storageIds[this.data.goodsListIndex] = ids;
wx.setStorageSync('ids',storageIds) wx.setStorageSync("ids", storageIds);
let storageDatasList = wx.getStorageSync("storageDatasList");
storageDatasList[
this.data.goodsListIndex
] = this.data.datas.componentData;
wx.setStorageSync("storageDatasList", storageDatasList);
let storageDatasList = wx.getStorageSync('storageDatasList')
storageDatasList[this.data.goodsListIndex] = this.data.datas.componentData
wx.setStorageSync('storageDatasList',storageDatasList)
this.moreProduct(true); this.moreProduct(true);
} }
}); });
...@@ -216,23 +219,38 @@ const componentOptions = { ...@@ -216,23 +219,38 @@ const componentOptions = {
async moreProduct(flag) { async moreProduct(flag) {
// 没有数据了就不再请求了，直接return // 没有数据了就不再请求了，直接return
if (this.data.pageGoodsList.length != 0 && this.data.pageGoodsList[this.data.datasIndex].length == wx.getStorageSync('ids')[this.data.datasIndex].length) return if (
let terminalProductIds = [] this.data.pageGoodsList.length != 0 &&
console.log(pageNum,'page-----'); this.data.pageGoodsList[this.data.datasIndex].length ==
let pageNumList = wx.getStorageSync('pageNumList') wx.getStorageSync("ids")[this.data.datasIndex].length
let pageNum = null )
return;
let terminalProductIds = [];
console.log(pageNum, "page-----");
let pageNumList = wx.getStorageSync("pageNumList");
let pageNum = null;
if (flag) { if (flag) {
pageNum = pageNumList[this.data.goodsListIndex] pageNum = pageNumList[this.data.goodsListIndex];
terminalProductIds = wx.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize) terminalProductIds = wx
pageNum += 1 .getStorageSync("ids")
pageNumList[this.data.goodsListIndex] = pageNum [this.data.goodsListIndex].slice(
}else{ (pageNum - 1) * this.data.pageSize,
pageNum = pageNumList[this.data.datasIndex] pageNum * this.data.pageSize
terminalProductIds = wx.getStorageSync('ids')[this.data.datasIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize) );
pageNum += 1 pageNum += 1;
pageNumList[this.data.datasIndex] = pageNum pageNumList[this.data.goodsListIndex] = pageNum;
} else {
pageNum = pageNumList[this.data.datasIndex];
terminalProductIds = wx
.getStorageSync("ids")
[this.data.datasIndex].slice(
(pageNum - 1) * this.data.pageSize,
pageNum * this.data.pageSize
);
pageNum += 1;
pageNumList[this.data.datasIndex] = pageNum;
} }
wx.setStorageSync('pageNumList',pageNumList) wx.setStorageSync("pageNumList", pageNumList);
let { let {
vipPrice, vipPrice,
marketingTag, marketingTag,
...@@ -252,11 +270,12 @@ const componentOptions = { ...@@ -252,11 +270,12 @@ const componentOptions = {
goodsApi.queryMoreProductInfo(moreQuery).then(res => { goodsApi.queryMoreProductInfo(moreQuery).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
goodsList = res.data.data; goodsList = res.data.data;
this.goodsListVal(goodsList, 1,flag); this.goodsListVal(goodsList, 1, flag);
} }
}); });
}, },
goodsListVal(goodsList, type,flag) { goodsListVal(goodsList, type, flag) {
console.log(this, "----------------------280");
console.log(goodsList, "------------goodsListVal"); console.log(goodsList, "------------goodsListVal");
goodsList.forEach((item, index) => { goodsList.forEach((item, index) => {
item.marketingTag = item.defaultTags item.marketingTag = item.defaultTags
...@@ -266,7 +285,7 @@ const componentOptions = { ...@@ -266,7 +285,7 @@ const componentOptions = {
) )
: []; : [];
item.shopLogoUrl = DFSImg(item.shopLogoUrl); item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.loadState = false item.loadState = false;
item.coverImage = DFSImg(item.coverImage, 400, 400, 1); item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1); item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2); item.minPrice = Number(item.minPrice).toFixed(2);
...@@ -289,46 +308,50 @@ const componentOptions = { ...@@ -289,46 +308,50 @@ const componentOptions = {
item.getSaleTime = this.getSaleTime(item.saleTime); item.getSaleTime = this.getSaleTime(item.saleTime);
} }
}); });
var that = this
let pageGoodsList = wx.getStorageSync('pageGoodsList') || [] let pageGoodsList = wx.getStorageSync("pageGoodsList") || [];
if (flag) { if (flag) {
pageGoodsList[that.data.goodsListIndex].push(...goodsList) pageGoodsList[this.data.goodsListIndex].push(...goodsList);
}else{ } else {
pageGoodsList[that.data.datasIndex].push(...goodsList) pageGoodsList[this.data.datasIndex].push(...goodsList);
console.log(pageGoodsList[that.data.datasIndex],'--pageGoodsList[that.data.datasIndex]') console.log(
pageGoodsList[this.data.datasIndex],
"--pageGoodsList[this.data.datasIndex]"
);
} }
wx.setStorageSync('pageGoodsList', pageGoodsList); wx.setStorageSync("pageGoodsList", pageGoodsList);
// 获取是否要开启请求拦截 // 获取是否要开启请求拦截
let loadingFlag = wx.getStorageSync('loadingFlag') let loadingFlag = wx.getStorageSync("loadingFlag");
loadingFlag[that.data.datasIndex] = false loadingFlag[this.data.datasIndex] = false;
wx.setStorageSync('loadingFlag', loadingFlag); wx.setStorageSync("loadingFlag", loadingFlag);
that.setData({
pageGoodsList,
})
this.setData({ this.setData({
"datas.componentData.goodsList": goodsList, pageGoodsList,
// goodsList testFlag: 999
loadingFlag });
},function () { this.setData(
// that.lazyloading(); {
"datas.componentData.goodsList": goodsList,
// 节点布局方案在组件嵌套层级过深测试无效 // goodsList
// let goodsList = this.data.goodsList // 获取原数据 loadingFlag
// goodsList.forEach((item,index)=>{ },
// wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe(`.goodsItemIndex${index}`, (ret) => { function() {
// // if (ret.intersectionRatio > 0){ // this.lazyloading();
// // group[i].show = true // 节点布局方案在组件嵌套层级过深测试无效
// // } // let goodsList = this.data.goodsList // 获取原数据
// // this.setData({ // 更新数据 // goodsList.forEach((item,index)=>{
// // group // wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe(`.goodsItemIndex${index}`, (ret) => {
// // }) // // if (ret.intersectionRatio > 0){
// console.log('1111'); // // group[i].show = true
// }) // // }
// }) // // this.setData({ // 更新数据
}) // // group
// // })
// console.log('1111');
// })
// })
}
);
if (type == 1) { if (type == 1) {
// 初始化 // 初始化
...@@ -344,77 +367,112 @@ const componentOptions = { ...@@ -344,77 +367,112 @@ const componentOptions = {
}, },
// 触发图片加载 // 触发图片加载
lazyloading(){ lazyloading() {
var that = this console.log(this, "-------------------------this");
console.log(that.data.datasIndex,that.data.goodsListIndex,'datasIndex'); console.log(this.data.datasIndex, this.data.goodsListIndex, "datasIndex");
console.log(that.data.pageGoodsList[that.data.datasIndex]); console.log(this.data.pageGoodsList[this.data.datasIndex]);
let storageDatasList = wx.getStorageSync('storageDatasList') || [] let storageDatasList = wx.getStorageSync("storageDatasList") || [];
let { style } = storageDatasList[that.data.datasIndex]; let { style } = storageDatasList[this.data.datasIndex];
let type = '' let type = "";
if(style == 'list'){ if (style == "list") {
type = 'goods-item' type = "goods-item";
}else{ } else {
console.log("不是goods-item"); console.log("不是goods-item");
return return;
} }
let windowHeight = wx.getSystemInfoSync().windowHeight
let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
console.log(that.data.pageGoodsList,pageGoodsList,that.data.datasIndex,'pageGoodsList--loading');
let loadingFlag = wx.getStorageSync('loadingFlag') let windowHeight = wx.getSystemInfoSync().windowHeight;
let pageGoodsList = wx.getStorageSync("pageGoodsList") || [];
console.log(
this.data.pageGoodsList,
pageGoodsList,
this.data.datasIndex,
"pageGoodsList--loading"
);
let loadingFlag = wx.getStorageSync("loadingFlag");
// 如果所有的商品都加载完成直接return // 如果所有的商品都加载完成直接return
if (loadingFlag[that.data.datasIndex]) { if (loadingFlag[this.data.datasIndex]) {
console.log("如果所有的商品都加载完成直接return"); console.log("如果所有的商品都加载完成直接return");
return return;
} }
let that = this;
console.log(this, "--------------this.data--1");
wx
.createSelectorQuery()
.selectAll(`.goodsListItemIndex${this.data.datasIndex}>>>.${type}`)
.boundingClientRect(function(rects) {
for (let index = 0; index < rects.length; index++) {
if (
rects[index].top == 0 &&
rects[index].bottom == 0 &&
rects[index].left == 0 &&
rects[index].right == 0
) {
break;
}
console.log(
rects[index].top,
windowHeight,
that.data.datasIndex,
"判断判断"
);
if (rects[index].top < windowHeight) {
// that.$set(pageGoodsList[that.data.datasIndex][index],'loadState',true)
pageGoodsList[that.data.datasIndex][index].loadState = true;
// var newArr = JSON.parse(JSON.stringify(pageGoodsList))
wx.createSelectorQuery().selectAll(`.goodsListItemIndex${that.data.datasIndex}>>>.${type}`).boundingClientRect(function(rects){ // pageGoodsList[that.data.datasIndex] = []
for (let index = 0; index < rects.length; index++) { }
if (rects[index].top == 0 && rects[index].bottom == 0 && rects[index].left == 0 && rects[index].right == 0) { console.log(
break pageGoodsList[that.data.datasIndex][0].productName,
} that.data.testFlag,
console.log(rects[index].top,windowHeight,'判断判断'); "----------------pageGoodsList"
if (rects[index].top < windowHeight) { );
// that.$set(pageGoodsList[that.data.datasIndex][index],'loadState',true)
pageGoodsList[that.data.datasIndex][index].loadState = true
// var newArr = JSON.parse(JSON.stringify(pageGoodsList))
// pageGoodsList[that.data.datasIndex] = []
} }
}
that.setData({ that.setData({
pageGoodsList, pageGoodsList,
}) testFlag: 2
// that.pageGoodsList = pageGoodsList });
console.log(rects,pageGoodsList[that.data.goodsListIndex], pageGoodsList[that.data.datasIndex],'fff');
wx.setStorageSync('pageGoodsList',pageGoodsList)
// loadingFlag[that.data.datasIndex] = true console.log(that, "--------------that.data--2");
// that.setData({ // that.pageGoodsList = pageGoodsList
// loadingFlag console.log(
// }) rects,
// wx.setStorageSync('loadingFlag',loadingFlag) pageGoodsList[that.data.goodsListIndex],
// that.moreProduct(false) pageGoodsList[that.data.datasIndex],
// console.log('load--ok'); "fff"
);
wx.setStorageSync("pageGoodsList", pageGoodsList);
// 如果当前分页最后一张加载完成直接 打开loadingFlag开关并加载下一页数据 // loadingFlag[that.data.datasIndex] = true
if (that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true) { // that.setData({
loadingFlag[that.data.datasIndex] = true // loadingFlag
that.setData({ // })
loadingFlag // wx.setStorageSync('loadingFlag',loadingFlag)
}) // that.moreProduct(false)
wx.setStorageSync('loadingFlag',loadingFlag) // console.log('load--ok');
that.moreProduct(false) // 如果当前分页最后一张加载完成直接 打开loadingFlag开关并加载下一页数据
if (
that.data.pageGoodsList[that.data.datasIndex][
that.data.pageGoodsList[that.data.datasIndex].length - 1
].loadState == true
) {
loadingFlag[that.data.datasIndex] = true;
that.setData({
loadingFlag
});
wx.setStorageSync("loadingFlag", loadingFlag);
console.log('load--ok'); that.moreProduct(false);
}
}).exec();
console.log("load--ok");
}
})
.exec();
}, },
getSaleTime(val) { getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime(); return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
...@@ -483,10 +541,17 @@ const componentOptions = { ...@@ -483,10 +541,17 @@ const componentOptions = {
return showFlag; return showFlag;
}, },
getScroll(el) { getScroll(el) {
//! 如果不是当前tab页return不执行滚动加载
if (this.data.datasIndex != this.data.goodsListIndex) return;
console.log(
this.data.datasIndex,
this.data.goodsListIndex,
"-----goodsListIndex"
);
// 是指定分类且不显示查看更多的瀑布流组件滚动加载 // 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData; let { goodsSource, moreShow, style } = this.data.datas.componentData;
console.log('goodsSource, moreShow, style',goodsSource, moreShow, style); console.log("goodsSource, moreShow, style", goodsSource, moreShow, style);
this.lazyloading() this.lazyloading();
if ( if (
goodsSource == "classify" && goodsSource == "classify" &&
...@@ -514,7 +579,7 @@ const componentOptions = { ...@@ -514,7 +579,7 @@ const componentOptions = {
} else { } else {
linkVal = `/pointShop/productList?categoryName=${categoryName}&categoryId=${categoryId}`; linkVal = `/pointShop/productList?categoryName=${categoryName}&categoryId=${categoryId}`;
} }
app.trackCpn(e, this.data.datas.componentName, 'ViewMore查看更多') app.trackCpn(e, this.data.datas.componentName, "ViewMore查看更多");
$themeToLink({ $themeToLink({
type: 1, type: 1,
link: linkVal link: linkVal
......
static/nativeComponents/GoodsList/index.wxml
...@@ -30,6 +30,8 @@ ...@@ -30,6 +30,8 @@
class="goods-item {{'goodsItemIndex'+index}}" class="goods-item {{'goodsItemIndex'+index}}"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx" style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
> >
+{{testFlag}}+
*{{goodsListIndex}}*
<!-- <goods-item <!-- <goods-item
datas="{{datas}}" datas="{{datas}}"
items="{{goodsList[index]}}" items="{{goodsList[index]}}"
......
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