Skip to content

M
mayi-mp-shop
Commit 3a787cd4 by 柳士祥
Options

首页商品列表分页懒加载

parent 33daa5fb
Showing with 247 additions and 13 deletions
src/components/basicTool/transverse-label/index.vue
......@@ -69,7 +69,10 @@
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list class="goodsListItem" :datas="item1"></goods-list>
<!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> -->
<goods-list :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
......@@ -215,6 +218,28 @@ export default {
computed: {
tabList: {
get() {
let pageGoodsList = []
let storageDatasList = []
let loadingFlag = []
let ids =[]
let pageNumList = []
this.datas.componentData.tabList.forEach(v=>{
v.contentList.forEach(vc=>{
if (vc.componentCode == 'goods-list') {
pageGoodsList.push([])
storageDatasList.push([])
ids.push([])
pageNumList.push(1)
loadingFlag.push(false)
}
})
})
console.log(pageGoodsList,storageDatasList,ids,loadingFlag,pageNumList,'newVal');
wx.setStorageSync("pageGoodsList",pageGoodsList)
wx.setStorageSync("storageDatasList",storageDatasList)
wx.setStorageSync("ids",ids)
wx.setStorageSync("loadingFlag",loadingFlag)
wx.setStorageSync("pageNumList",pageNumList)
return this.datas.componentData.tabList.filter(
(item) => item.visible == undefined || item.visible == 1
);
......@@ -421,6 +446,9 @@ export default {
item.getScroll()
})
}
if(this.$parent.$mp.page.selectAllComponents('.goodsListItem')){
this.$parent.$mp.page.selectAllComponents('.transverse-label-goodsListItem')
}
this.active=res.target.index;
},
timeOutInitTabs(notGetAllTabWidth) {
......
src/pages/home/index.vue
......@@ -157,6 +157,7 @@ import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } fr
import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js"
import mpvueCropper from '@/components/mpvue-cropper'
import tool from '../../utils/tool.js'
const app = getApp();
const { log } = app;
export default {
......@@ -387,6 +388,26 @@ export default {
// 新人有礼弹窗
this.newUserFun();
}
//清除懒加载缓存
wx.removeStorage({
key: 'pageGoodsList'
})
wx.removeStorage({
key: 'storageDatasList'
})
wx.removeStorage({
key: 'datasIndex'
})
wx.removeStorage({
key: 'loadingFlag'
})
wx.removeStorage({
key: 'pageNumList'
})
console.log('storageGoodsList---detory');
},
onShow() {
// 设置显示条件
......@@ -408,10 +429,16 @@ export default {
this.active=checkTabbarPage('/')
}
this.$mp.page.onPageScroll= (el)=>{
throttle(this.scrolls(el),100)
};
// this.$mp.page.onPageScroll= (el)=>{
// throttle(this.scrolls(el),100)
// };
},
// 滚动节流方法
onPageScroll: tool.throttle(function (el) {
// console.log(el);
this.scrolls(el)
},200),
methods: {
async setVisible(pageList, cb) {
// 首页显示条件
......@@ -673,6 +700,12 @@ export default {
if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
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){
// return
......
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item -->
<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
<!-- <view wx:if="{{items && datas.componentData['style'] == 'list' && items.loadState == false}}">
<view class="skeleton-animate">
<view class="skeleton-bg skeleton-img"></view>
<view class="skeleton-bg skeleton-title"></view>
<view class="skeleton-bg skeleton-detail"></view>
<view class="skeleton-bg skeleton-price"></view>
</view>
</view> -->
<view
class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
style="--proGap2:{{datas.componentData.proGap*2}}rpx;"
......
static/nativeComponents/GoodsList/index.js
......@@ -9,6 +9,12 @@ const componentOptions = {
properties: {
datas: {
type: Object
},
datasIndex:{
type: Number
},
goodsListIndex:{
type: Number
}
},
// 组件数据
......@@ -21,6 +27,12 @@ const componentOptions = {
loading: false,
finished: false,
goodsList:[],
storageGoodsList:[],
storageDatasList:[],
pageSize:10,
pageNum:1,
pageGoodsList:[],
loadingFlag:[],
},
// 数据监听器
observers: {},
......@@ -61,6 +73,11 @@ const componentOptions = {
},
// 组件方法
methods: {
// setPageDatas(active){
// this.pageGoodsList = wx.getStorageSync('pageGoodsList')
// console.log(this.pageGoodsList,active,'active');
// },
init() {
let {
goodsType,
......@@ -183,11 +200,39 @@ const componentOptions = {
let goodsList = this.render ? res.data.list : res.data.data.list;
return element.terminalProductId;
});
this.moreProduct(ids);
let storageIds = wx.getStorageSync('ids')
storageIds[this.data.goodsListIndex] = ids
wx.setStorageSync('ids',storageIds)
let storageDatasList = wx.getStorageSync('storageDatasList')
storageDatasList[this.data.goodsListIndex] = this.data.datas.componentData
wx.setStorageSync('storageDatasList',storageDatasList)
this.moreProduct(true);
}
});
},
async moreProduct(terminalProductIds) {
async moreProduct(flag) {
// 没有数据了就不再请求了，直接return
if (this.data.pageGoodsList.length != 0 && this.data.pageGoodsList[this.data.datasIndex].length == wx.getStorageSync('ids')[this.data.datasIndex].length) return
let terminalProductIds = []
console.log(pageNum,'page-----');
let pageNumList = wx.getStorageSync('pageNumList')
let pageNum = null
if (flag) {
pageNum = pageNumList[this.data.goodsListIndex]
terminalProductIds = wx.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
pageNum += 1
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)
let {
vipPrice,
marketingTag,
......@@ -207,11 +252,11 @@ const componentOptions = {
goodsApi.queryMoreProductInfo(moreQuery).then(res => {
if (res.data.code == 200) {
goodsList = res.data.data;
this.goodsListVal(goodsList, 1);
this.goodsListVal(goodsList, 1,flag);
}
});
},
goodsListVal(goodsList, type) {
goodsListVal(goodsList, type,flag) {
console.log(goodsList, "------------goodsListVal");
goodsList.forEach((item, index) => {
item.marketingTag = item.defaultTags
......@@ -221,6 +266,7 @@ const componentOptions = {
)
: [];
item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.loadState = false
item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2);
......@@ -243,10 +289,47 @@ const componentOptions = {
item.getSaleTime = this.getSaleTime(item.saleTime);
}
});
var that = this
let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
if (flag) {
pageGoodsList[that.data.goodsListIndex].push(...goodsList)
}else{
pageGoodsList[that.data.datasIndex].push(...goodsList)
console.log(pageGoodsList[that.data.datasIndex],'--pageGoodsList[that.data.datasIndex]')
}
wx.setStorageSync('pageGoodsList', pageGoodsList);
// 获取是否要开启请求拦截
let loadingFlag = wx.getStorageSync('loadingFlag')
loadingFlag[that.data.datasIndex] = false
wx.setStorageSync('loadingFlag', loadingFlag);
that.setData({
pageGoodsList,
})
this.setData({
"datas.componentData.goodsList": goodsList,
goodsList
});
// goodsList
loadingFlag
},function () {
// that.lazyloading();
// 节点布局方案在组件嵌套层级过深测试无效
// let goodsList = this.data.goodsList // 获取原数据
// goodsList.forEach((item,index)=>{
// wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe(`.goodsItemIndex${index}`, (ret) => {
// // if (ret.intersectionRatio > 0){
// // group[i].show = true
// // }
// // this.setData({ // 更新数据
// // group
// // })
// console.log('1111');
// })
// })
})
if (type == 1) {
// 初始化
if (this.selectComponent("#waterfallFlow")) {
......@@ -259,6 +342,77 @@ const componentOptions = {
}
}
},
// 触发图片加载
lazyloading(){
var that = this
console.log(that.data.datasIndex,that.data.goodsListIndex,'datasIndex');
console.log(that.data.pageGoodsList[that.data.datasIndex]);
let storageDatasList = wx.getStorageSync('storageDatasList') || []
let { style } = storageDatasList[that.data.datasIndex];
let type = ''
if(style == 'list'){
type = 'goods-item'
}else{
console.log("不是goods-item");
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')
// 如果所有的商品都加载完成直接return
if (loadingFlag[that.data.datasIndex]) {
console.log("如果所有的商品都加载完成直接return");
return
}
let ids = wx.getStorageSync('ids')[that.data.datasIndex]
if (ids.length == that.data.pageGoodsList[that.data.datasIndex].length &&
that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true
) {
return
}
wx.createSelectorQuery().selectAll(`.goodsListItemIndex${that.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
}
if (rects[index].top < windowHeight) {
pageGoodsList[that.data.datasIndex][index].loadState = true
}
}
that.setData({
pageGoodsList,
})
// that.pageGoodsList = pageGoodsList
console.log(rects,pageGoodsList[that.data.goodsListIndex], pageGoodsList[that.data.datasIndex],'fff');
wx.setStorageSync('pageGoodsList',pageGoodsList)
// 如果当前分页倒数第一张加载完成直接 打开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)
that.moreProduct(false)
console.log('load--ok');
}
}).exec();
},
getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
},
......@@ -326,8 +480,12 @@ const componentOptions = {
return showFlag;
},
getScroll(el) {
//! 如果不是当前tab页return不执行滚动加载
if (this.data.datasIndex != this.data.goodsListIndex) return;
// 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData;
console.log('goodsSource, moreShow, style',goodsSource, moreShow, style);
this.lazyloading()
if (
goodsSource == "classify" &&
moreShow == false &&
......
static/nativeComponents/GoodsList/index.wxml
......@@ -25,15 +25,20 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{goodsList}}"
wx:for="{{pageGoodsList[datasIndex]}}"
wx:key="index"
class="goods-item"
class="goods-item {{'goodsItemIndex'+index}}"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
<!-- <goods-item
datas="{{datas}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item> -->
<goods-item
items="{{item}}"
datas="{{datas}}"
indexs="{{index}}"
></goods-item>
</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