Skip to content

M
mayi-mp-shop
Commit 3bae45c0 by 李嘉林
Options

瀑布流优化

parent f373826a
Showing with 98 additions and 66 deletions
src/pages/home/index.vue
......@@ -2,8 +2,8 @@
<div class="domain">
<!-- <view class="ant-daipinglun">1</view> -->
<!-- <goods-list id="goodsList"></goods-list> -->
<scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;" scroll-y="true">
<div style="position:relative">
<!-- <scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;overflow-y:auto;" scroll-y="true"> -->
<div style="position:relative;">
<ThemeDataPlant></ThemeDataPlant>
<div v-for="(item,index) in pageData" :key="index">
<div v-if="item.componentCode=='banner'">
......@@ -36,19 +36,19 @@
<div v-if="item.componentCode == 'float-button'">
<float-button :datas="item"></float-button>
</div>
</div>
<div v-if="item.componentCode == 'goods-search'">
<goods-search :datas="item"></goods-search>
</div>
<div v-if="item.componentCode == 'notice'">
<notice :datas="item"></notice>
</div>
<div v-if="item.componentCode == 'pop-up'">
<pop-up :datas="item"></pop-up>
<div v-if="item.componentCode == 'goods-search'">
<goods-search :datas="item"></goods-search>
</div>
<div v-if="item.componentCode == 'notice'">
<notice :datas="item"></notice>
</div>
<div v-if="item.componentCode == 'pop-up'">
<pop-up :datas="item"></pop-up>
</div>
</div>
</div>
<bottomCont></bottomCont>
</scroll-view>
<!-- </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>
......@@ -105,7 +105,7 @@ export default {
let logoUrl = app.DFSImg(res.data.data.logoUrl,500,400,0);
resolve({
title: shopName,
path: "page/home/main",
path: "/pages/home/main",
imageUrl:logoUrl,
success: function(res) {
console.log("成功", res);
......@@ -151,6 +151,9 @@ export default {
},
onShow() {
setTabBarActive.bind(this)(checkTabbarPage('/'));
this.$mp.page.onPageScroll= (el)=>{
this.scrolls(el);
};
},
methods: {
init(pageList) {
......@@ -161,8 +164,9 @@ export default {
console.log("36", this.pageData);
},
scrolls(el){
console.log('scroll')
this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
if(this.$mp.page.selectComponent(".goodsListItem")){
this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
}
},
scrolltolower(){
console.log("scrolltolower")
......
static/nativeComponents/GoodsList/index.js
......@@ -26,12 +26,14 @@ const componentOptions = {
// 组件生命周期
lifetimes: {
created() {},
ready() {},
ready() {
this.init();
},
moved() {},
detached() {}
},
attached() {
this.init();
},
definitionFilter() {},
// 页面生命周期
......@@ -220,8 +222,8 @@ const componentOptions = {
)
: [];
item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.coverImage = DFSImg(item.coverImage, 100, 100, 0);
item.productImgUrl = DFSImg(item.productImgUrl, 100, 100, 0);
item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = Number(item.saleQty);
......@@ -242,22 +244,20 @@ const componentOptions = {
item.getSaleTime = this.getSaleTime(item.saleTime);
}
});
setTimeout(() => {
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();
}
this.setData({
"datas.componentData.goodsList": goodsList
});
if (type == 1) {
// 初始化
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").initList(goodsList);
}
}, 0);
} else {
// 滚动加载
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").reLoadPro(goodsList);
}
}
},
getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
......
static/nativeComponents/TimeLimitedDiscount/activityListItem/index.wxml
......@@ -8,7 +8,7 @@
{{datas.singleItemActivityName}}
</view>
<view class="cover">
<image mode="center" src="{{datas.singleItemActivityCoverImage}}"></image>
<image src="{{datas.singleItemActivityCoverImage}}"></image>
</view>
<view class="countDown flex" wx:if="{{countDownShow}}">
<van-count-down
......
static/nativeComponents/TimeLimitedDiscount/activityListItem/index.wxss
.activityListItem {
margin-bottom: 20rpx;
padding: 20rpx 0;
background: #fff;
border-radius: 8rpx;
......@@ -7,6 +6,7 @@
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
margin-bottom: 20rpx;
}
.title {
padding: 8rpx 20rpx;
......@@ -23,6 +23,7 @@
}
.cover image {
width: 100%;
height: 100%;
}
.countDown {
padding: 4rpx 10rpx;
......
static/nativeComponents/TimeLimitedDiscount/index.js
......@@ -210,6 +210,7 @@ const componentOptions = {
item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage);
item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false;
console.log(item.isEnd,'-----------------------213');
})
this.setData({ "datas.componentData.actList": list });
if (hideNum == actList.length) {
......
static/nativeComponents/module/WaterfallFlow/index.js
......@@ -54,23 +54,41 @@ Component({
contentList: [],
inj: 0,
clientHeight: 0, //窗口高度
goodsNum:0,
goodsNum: 0,
},
methods: {
// 初始化数组
initList() {
initList(goodsList) {
// 初始化容器
let { contentList, waterfallDeviationHeight } = this.data;
contentList[0] = [];
contentList[1] = [];
waterfallDeviationHeight = [0,0];
waterfallDeviationHeight = [0, 0];
this.setData({ contentList, waterfallDeviationHeight });
console.log(this.data.note, "-------------------185");
this.reLoadPro();
this.reLoadPro(goodsList);
},
async reLoadPro() {
this.setHeight(this.data.goodsNum);
this.setData({ goodsNum:this.data.note.length>0?this.data.note.length+1:0 });
async reLoadPro(goodsList) {
console.log(goodsList,'----------------------75')
// this.setHeight(this.data.goodsNum);
this.setHeight1(this.data.goodsNum,goodsList);
this.setData({
goodsNum:
goodsList.length > 0 ? goodsList.length + 1 : 0
});
},
setHeight1(i,goodsList) {
let itemList = goodsList.splice(i, goodsList.length);
let { contentList } = this.data;
itemList.forEach((item, index) => {
if (index % 2 == 0) {
contentList[0].push(item);
console.log(item.productName, "--------位置--左");
} else {
contentList[1].push(item);
console.log(item.productName, "--------位置--右");
}
});
this.setData({ contentList });
},
setHeight(i) {
let _this = this;
......@@ -85,24 +103,24 @@ Component({
let contentList = this.data.contentList;
contentList[minIndex].push(item);
this.setData({ contentList });
_this
.createSelectorQuery()
.select(`.item${minIndex}`)
.boundingClientRect(function(res) {
if (res) {
res.height;
console.log(res, "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
waterfallDeviationHeight[minIndex] = res.height;
_this.setData({ waterfallDeviationHeight });
if (i >= _this.data.note.length - 1) {
return;
}
i++;
_this.setHeight(i);
}
})
.exec();
_this
.createSelectorQuery()
.select(`.item${minIndex}`)
.boundingClientRect(function(res) {
if (res) {
res.height;
console.log(res, "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
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 => {
......@@ -147,12 +165,13 @@ Component({
.select("#waterfallFlow")
.boundingClientRect(function(res) {
if (res) {
console.log(el, "-------------118");
console.log(res, "---------------35");
let scrollTop = parseInt(el.target.scrollTop);
let scrollTop = parseInt(el.scrollTop);
let domHeight = parseInt(res.height);
// 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
if (scrollTop + _this.data.clientHeight >= domHeight - 150 && finished == false) {
if (
scrollTop + _this.data.clientHeight >= domHeight - 150 &&
finished == false
) {
_this.triggerEvent("onLoad");
}
}
......
static/nativeComponents/module/WaterfallFlow/index.wxss
......@@ -16,4 +16,10 @@ image {
}
.container-item:nth-child(2n + 2) {
padding-left: var(--proGap);
}
.loadBottom{
text-align: center;
color: #999;
font-size: 24rpx;
margin-top: 10rpx;
}
\ No newline at end of file
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