Skip to content

M
mayi-mp-shop
Commit 2eed8a7b by 柳士祥
Options

首页加载速度代码回滚

parent 080c37a3
Showing with 21 additions and 255 deletions
project.config.json
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
"description": "项目配置文件。", "description": "项目配置文件。",
"setting": { "setting": {
"urlCheck": false, "urlCheck": false,
"es6": false, "es6": true,
"enhance": true, "enhance": true,
"postcss": true, "postcss": true,
"preloadBackgroundData": false, "preloadBackgroundData": false,
"minified": true, "minified": true,
"newFeature": false, "newFeature": true,
"coverView": true, "coverView": true,
"nodeModules": false, "nodeModules": true,
"autoAudits": false, "autoAudits": true,
"showShadowRootInWxmlPanel": true, "showShadowRootInWxmlPanel": true,
"scopeDataCheck": false, "scopeDataCheck": false,
"uglifyFileName": false, "uglifyFileName": true,
"checkInvalidKey": true, "checkInvalidKey": true,
"checkSiteMap": true, "checkSiteMap": true,
"uploadWithSourceMap": true, "uploadWithSourceMap": true,
......
src/components/basicTool/transverse-label/index.vue
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
<banner :datas="item1"></banner> <banner :datas="item1"></banner>
</div> </div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;"> <div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list v-if="active == index" :class="['goodsListItem','goodsListItemIndex'+index]" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list> <goods-list :class="['goodsListItem']" :datas="item1"></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">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation> <area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
...@@ -421,7 +421,6 @@ export default { ...@@ -421,7 +421,6 @@ export default {
}) })
} }
this.active=res.target.index; this.active=res.target.index;
wx.setStorageSync('datasIndex', res.target.index);
}, },
timeOutInitTabs(notGetAllTabWidth) { timeOutInitTabs(notGetAllTabWidth) {
setTimeout(() => { setTimeout(() => {
......
src/pages/home/index.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<banner :datas="item"></banner> <banner :datas="item"></banner>
</div> </div>
<div v-else-if="item.componentCode=='goods-list' && item.componentInfo.visible == 1" style="height:100%;"> <div v-else-if="item.componentCode=='goods-list' && item.componentInfo.visible == 1" style="height:100%;">
<goods-list :class="['goodsListItem' + index,'goodsListItemIndex0']" :datas="item" :single="true"></goods-list> <goods-list :class="'goodsListItem' + index" :datas="item"></goods-list>
</div> </div>
<div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1"> <div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1">
<area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation> <area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation>
...@@ -158,7 +158,7 @@ import indexApi from "@/api/index.js"; ...@@ -158,7 +158,7 @@ import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js" import { throttle, concatUrl } from "../../utils/index.js"
import mpvueCropper from '@/components/mpvue-cropper' import mpvueCropper from '@/components/mpvue-cropper'
const app = getApp(); const app = getApp();
const { log,tool } = app; const { log } = app;
export default { export default {
data() { data() {
return { return {
...@@ -382,24 +382,11 @@ export default { ...@@ -382,24 +382,11 @@ export default {
this.themeColor = res this.themeColor = res
} }
} }
// 不是冬奥会项目不调用此接口 // 不是冬奥会项目不调用此接口
if(this.$store.state.mixid !='CL'){ if(this.$store.state.mixid !='CL'){
// 新人有礼弹窗 // 新人有礼弹窗
this.newUserFun(); this.newUserFun();
} }
//清除懒加载缓存
wx.removeStorage({
key: 'storageGoodsList'
})
wx.removeStorage({
key: 'storageDatasList'
})
wx.removeStorage({
key: 'datasIndex'
})
console.log('storageGoodsList---detory');
}, },
onShow() { onShow() {
// 设置显示条件 // 设置显示条件
...@@ -421,14 +408,10 @@ export default { ...@@ -421,14 +408,10 @@ export default {
this.active=checkTabbarPage('/') this.active=checkTabbarPage('/')
} }
// this.$mp.page.onPageScroll= (el)=>{ this.$mp.page.onPageScroll= (el)=>{
// throttle(this.scrolls(el),100) throttle(this.scrolls(el),100)
// }; };
}, },
onPageScroll: tool.throttle(function (el) {
// console.log(el);
this.scrolls(el)
},1000),
methods: { methods: {
async setVisible(pageList, cb) { async setVisible(pageList, cb) {
// 首页显示条件 // 首页显示条件
...@@ -551,7 +534,6 @@ export default { ...@@ -551,7 +534,6 @@ export default {
this.active=checkTabbarPage('/'); this.active=checkTabbarPage('/');
this.setVisible(this.mpApp.globalData.pageList,(res)=>{ this.setVisible(this.mpApp.globalData.pageList,(res)=>{
this.pageInfo = res; this.pageInfo = res;
console.log(this.pageInfo,'this.pageInfo');
this.pageData = JSON.parse(this.pageInfo.pageData); this.pageData = JSON.parse(this.pageInfo.pageData);
}); });
log.info("36----------------------559", this.pageData,this.pageInfo.pageSettingData); log.info("36----------------------559", this.pageData,this.pageInfo.pageSettingData);
...@@ -611,7 +593,7 @@ export default { ...@@ -611,7 +593,7 @@ export default {
getSpokesmanInit(extConfig) { getSpokesmanInit(extConfig) {
//绑定上下级关系 //绑定上下级关系
app.fenxiaoModel.becomeRelation(extConfig).then(res=>{ app.fenxiaoModel.becomeRelation(extConfig).then(res=>{
if(res.data.code == '200') { if(res) {
wx.removeStorage({ wx.removeStorage({
key: "becomeInfo" key: "becomeInfo"
}); });
......
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item --> <!-- 商品列表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 <view
class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}" class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
style="--proGap2:{{datas.componentData.proGap*2}}rpx;" style="--proGap2:{{datas.componentData.proGap*2}}rpx;"
bindtap="onclickProduct" bindtap="onclickProduct"
wx:else
> >
<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};"> <view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
<!-- 商户入口-顶部 --> <!-- 商户入口-顶部 -->
...@@ -66,7 +56,6 @@ ...@@ -66,7 +56,6 @@
<image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" /> <image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" />
</view> </view>
<!-- 商品主图 --> <!-- 商品主图 -->
<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
<image <image
lazy-load lazy-load
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}" mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
......
static/nativeComponents/GoodsList/GoodsItem/index.wxss
@import "/static/font/common_icon.wxss"; @import "/static/font/common_icon.wxss";
/* 商品列表骨架屏 */
@import "/static/css/skeleton.wxss";
.flex{ .flex{
display: flex; display: flex;
} }
......
static/nativeComponents/GoodsList/index.js
const app = getApp(); const app = getApp();
const { goodsApi, DFSImg, $themeToLink,tool } = app; const { goodsApi, DFSImg, $themeToLink } = app;
const componentOptions = { const componentOptions = {
// 组件选项 // 组件选项
options: { options: {
...@@ -9,20 +9,7 @@ const componentOptions = { ...@@ -9,20 +9,7 @@ const componentOptions = {
properties: { properties: {
datas: { datas: {
type: Object type: Object
},
datasIndex:{
type: Number,
value:0,
observer: function () {
// console.log('aaa');
// this.init()
} }
},
goodsListIndex:{
type:Number,
value:0,
},
}, },
// 组件数据 // 组件数据
data: { data: {
...@@ -34,13 +21,6 @@ const componentOptions = { ...@@ -34,13 +21,6 @@ const componentOptions = {
loading: false, loading: false,
finished: false, finished: false,
goodsList:[], goodsList:[],
storageGoodsList:[],
storageDatasList:[],
pageSize:10,
pageNum:1,
pageGoodsList:[],
loadingFlag:true,
wheatherLazyloading:false
}, },
// 数据监听器 // 数据监听器
observers: {}, observers: {},
...@@ -190,7 +170,7 @@ const componentOptions = { ...@@ -190,7 +170,7 @@ const componentOptions = {
page: 1, page: 1,
rows: terminalProductIds.length, rows: terminalProductIds.length,
terminalProductIds: terminalProductIds, terminalProductIds: terminalProductIds,
whetherShowSoldOutGoods: app.shop_configuration.whetherShowSoldOutGoods whetherShowSoldOutGoods: this.whetherShowSoldOutGoods
}; // 当前页 // 一页多少条 }; // 当前页 // 一页多少条
this.briefProduct(briefQuery); this.briefProduct(briefQuery);
} }
...@@ -203,32 +183,11 @@ const componentOptions = { ...@@ -203,32 +183,11 @@ const componentOptions = {
let goodsList = this.render ? res.data.list : res.data.data.list; let goodsList = this.render ? res.data.list : res.data.data.list;
return element.terminalProductId; return element.terminalProductId;
}); });
this.moreProduct(ids);
let stroageIds = []
stroageIds[this.data.datasIndex] = ids
wx.setStorageSync('ids', stroageIds);
let storageDatasList = wx.getStorageSync('storageDatasList') || []
storageDatasList.push(this.data.datas.componentData)
wx.setStorageSync('storageDatasList', storageDatasList);
let pageGoodsList = this.data.pageGoodsList
pageGoodsList[this.data.datasIndex] = []
this.setData({
pageGoodsList
})
this.moreProduct();
} }
}); });
}, },
async moreProduct() { async moreProduct(terminalProductIds) {
let terminalProductIds = wx.getStorageSync('ids')[this.data.datasIndex].slice((this.data.pageNum - 1) * this.data.pageSize,this.data.pageNum * this.data.pageSize)
let pageNum = this.data.pageNum
pageNum += 1
this.setData({
pageNum
})
let { let {
vipPrice, vipPrice,
marketingTag, marketingTag,
...@@ -248,7 +207,6 @@ const componentOptions = { ...@@ -248,7 +207,6 @@ 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;
if ( res.data.data.length == 0 ) this.setData({wheatherLazyloading : false})
this.goodsListVal(goodsList, 1); this.goodsListVal(goodsList, 1);
} }
}); });
...@@ -265,8 +223,6 @@ const componentOptions = { ...@@ -265,8 +223,6 @@ const componentOptions = {
item.shopLogoUrl = DFSImg(item.shopLogoUrl); item.shopLogoUrl = DFSImg(item.shopLogoUrl);
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.loadState = false
item.loadProductImgUrl = ""
item.minPrice = Number(item.minPrice).toFixed(2); item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty); item.qty = Number(item.qty);
item.saleQty = item.saleQty ? Number(item.saleQty) : 1; item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
...@@ -287,64 +243,10 @@ const componentOptions = { ...@@ -287,64 +243,10 @@ const componentOptions = {
item.getSaleTime = this.getSaleTime(item.saleTime); item.getSaleTime = this.getSaleTime(item.saleTime);
} }
}); });
var that = this
let pageGoodsList = that.data.pageGoodsList
pageGoodsList[that.data.datasIndex].push(...goodsList)
this.setData({ this.setData({
"datas.componentData.goodsList": goodsList, "datas.componentData.goodsList": goodsList,
// goodsList goodsList
pageGoodsList, });
loadingFlag:true
},function () {
wx.setStorageSync('pageGoodsList', pageGoodsList);
this.setData({wheatherLazyloading:true})
that.lazyloading();
// var num = 0
// wx.createSelectorQuery().selectAll("._goods-list").boundingClientRect(function(rects){
// console.log(rects,'rects');
// rects.forEach((e,v)=>{
// num ++
// })
// let storageGoodsList = wx.getStorageSync('storageGoodsList') || []
// let storageDatasList = wx.getStorageSync('storageDatasList') || []
// storageGoodsList.push(goodsList)
// storageDatasList.push(that.data.datas.componentData)
// wx.setStorageSync('storageGoodsList', storageGoodsList);
// wx.setStorageSync('storageDatasList', storageDatasList);
// console.log(storageGoodsList.length,num,'storageGoodsList.length');
// let pageGoodsList = []
// pageGoodsList[that.data.datasIndex] = storageGoodsList[that.data.datasIndex].slice(0,10)
// wx.setStorageSync('pageGoodsList', pageGoodsList);
// that.lazyloading();
// that.setData({
// pageGoodsList
// },function () {
// that.lazyloading();
// })
// if (storageGoodsList.length == num) {
// that.setData({
// storageGoodsList
// })
// console.log(that.data.storageGoodsList,'storageGoodsList');
// }
// }).exec();
// 节点布局方案在组件嵌套层级过深测试无效
// 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 (type == 1) {
// 初始化 // 初始化
if (this.selectComponent("#waterfallFlow")) { if (this.selectComponent("#waterfallFlow")) {
...@@ -357,102 +259,6 @@ const componentOptions = { ...@@ -357,102 +259,6 @@ const componentOptions = {
} }
} }
}, },
// 触发图片加载
lazyloading(){
var that = this
let storageDatasList = wx.getStorageSync('storageDatasList') || []
console.log('storageDatasList',storageDatasList);
let { style } = storageDatasList[that.data.datasIndex];
let type = ''
if(style == 'list'){
type = 'goods-item'
}else{
return
}
// console.log(that.data.datasIndex,that.data.goodsListIndex,'index');
// if (that.data.datasIndex != that.data.goodsListIndex) {
// return
// }
let windowHeight = wx.getSystemInfoSync().windowHeight
// let goodsList = that.data.goodsList
let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
if (!that.data.loadingFlag) {
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
// if (index == storageGoodsList[that.data.datasIndex].length && storageGoodsList[that.data.datasIndex][index].loadState == true) {
// loadingFlag = true
// }
// goodsList[index].loadState = true
}
}
// rects.forEach((item,index)=>{
// if (condition) {
// }
// if (item.top < windowHeight) {
// goodsList[index].loadState = true
// }
// })
that.setData({
// goodsList
pageGoodsList
})
console.log(rects,that.data.pageGoodsList, pageGoodsList[that.data.datasIndex],'fff');
wx.setStorageSync('pageGoodsList',pageGoodsList)
// let storageGoodsList = wx.getStorageSync('storageGoodsList')[that.data.datasIndex]
// if (storageGoodsList.length == that.data.pageGoodsList.length) {
// return
// }
if (that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true) {
// let pageNum = that.data.pageNum
// pageNum += 1
// that.setData({
// pageNum
// })
// let newPageGoodsList = that.data.pageGoodsList
// console.log(pageGoodsList,newPageGoodsList,'newPageGoodsList');
// let sliceStorageGoodsList = storageGoodsList.slice((that.data.pageNum - 1) * that.data.pageSize,that.data.pageNum * that.data.pageSize)
// newPageGoodsList[that.data.datasIndex].push(...sliceStorageGoodsList)
// console.log(sliceStorageGoodsList,newPageGoodsList,'newPageGoodsList2');
that.setData({
loadingFlag:false
})
that.moreProduct()
// that.setData({
// pageGoodsList:newPageGoodsList
// },function(){
// wx.setStorageSync('pageGoodsList',pageGoodsList)
// that.setData({
// loadingFlag:true
// })
// console.log(that.data.pageGoodsList,pageGoodsList,'pageGoodsList');
// })
console.log('load--ok');
}
}).exec();
// let keyStr = `datas.componentData.goodsList[${index}].loadState`;
// this.setData({
// [keyStr]:true
// })
},
getSaleTime(val) { getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime(); return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
}, },
...@@ -522,9 +328,6 @@ const componentOptions = { ...@@ -522,9 +328,6 @@ const componentOptions = {
getScroll(el) { getScroll(el) {
// 是指定分类且不显示查看更多的瀑布流组件滚动加载 // 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData; let { goodsSource, moreShow, style } = this.data.datas.componentData;
console.log('goodsSource, moreShow, style',goodsSource, moreShow, style);
if (!this.data.wheatherLazyloading) return
this.lazyloading()
if ( if (
goodsSource == "classify" && goodsSource == "classify" &&
moreShow == false && moreShow == false &&
......
static/nativeComponents/GoodsList/index.wxml
...@@ -25,19 +25,14 @@ ...@@ -25,19 +25,14 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;" style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
> >
<view <view
wx:for="{{pageGoodsList[datasIndex]}}" wx:for="{{goodsList}}"
wx:key="index" wx:key="index"
class="goods-item {{'goodsItemIndex'+index}}" class="goods-item"
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"
> >
<!-- <goods-item
datas="{{datas}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item> -->
<goods-item <goods-item
items="{{pageGoodsList[datasIndex][index]}}"
datas="{{datas}}" datas="{{datas}}"
items="{{goodsList[index]}}"
indexs="{{index}}" indexs="{{index}}"
></goods-item> ></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