logo头像
Snippet 博客主题

微信小程序电商实战-商品列表流式布局

本文于317天之前发表,文中内容可能已经过时。

今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦

####流式布局概念

1
2
3
4
流式布局也叫百分比布局
把元素的宽,高,margin,padding不再用固定数值,改用百分比,
这样元素的宽,高,margin,padding会根据页面的尺寸随时
调整已达到适应当前页面的目的.

先看效果:
商品列表流式布局.gif

如上图所示,为了能够看的更直观一点我给布局设置了红色虚线边框,整体页面根据元素的百分比进行布局。
直接看代码:

####xxx.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
<view class="goods" style="width:100%">
<view class="mg_item">
<view wx:for="{{col1}}" wx:key="id">
<view class="item_info">
<image src="{{item.imageurl}}" style="width:100%;height:{{item.height}}px"></image>
</view>
<view class="product-name">
{{item.name}}
</view>
<view class="product-price-wrap">
<p class="product-price-new">¥{{item.newprice}}</p>
<p class="product-price-old">¥{{item.oldprice}}</p>
<p class="discount">{{item.discount}}折</p>
</view>
</view>
</view>
<view class="mg_item">
<view wx:for="{{col2}}" wx:key="id">
<view class="item_info">
<image src="{{item.imageurl}}" style="width:100%;height:{{item.height}}px"></image>
</view>
<view class="product-name">
{{item.name}}
</view>
<view class="product-price-wrap">
<p class="product-price-new">¥{{item.newprice}}</p>
<p class="product-price-old">¥{{item.oldprice}}</p>
<p class="discount">{{item.discount}}折</p>
</view>
</view>
</view>
</view>
</scroll-view>
<view style="display:none">
<image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.imageurl}}" bindload="onImageLoad"></image>
</view>

通过查看class标签发现有两个img_item ,所以采取的是左右分别加载数据方式。

####xxx.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

Page({

data: {
scrollH: 0,
imgWidth: 0,
loadingCount: 0,
images: [],
col1: [],
col2: []
},

onLoad: function () {
wx.getSystemInfo({
success: (res) => {
let ww = res.windowWidth;
let wh = res.windowHeight;
let imgWidth = ww * 0.48;
let scrollH = wh;

this.setData({
scrollH: scrollH,
imgWidth: imgWidth
});

//加载首组图片
this.loadImages();
}
})
},

onImageLoad: function (e) {
let imageId = e.currentTarget.id;
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let imgWidth = this.data.imgWidth; //图片设置的宽度
let scale = imgWidth / oImgW; //比例计算
let imgHeight = oImgH * scale; //自适应高度

let images = this.data.images;
let imageObj = null;

for (let i = 0; i < images.length; i++) {
let img = images[i];
if (img.id === imageId) {
imageObj = img;
break;
}
}

imageObj.height = imgHeight;

let loadingCount = this.data.loadingCount - 1;
let col1 = this.data.col1;
let col2 = this.data.col2;

//判断当前图片添加到左列还是右列
if (col1.length <= col2.length) {
col1.push(imageObj);
} else {
col2.push(imageObj);
}

let data = {
loadingCount: loadingCount,
col1: col1,
col2: col2
};

//当前这组图片已加载完毕,则清空图片临时加载区域的内容
if (!loadingCount) {
data.images = [];
}

this.setData(data);
},

loadImages: function () {
let images = [
{
goodId: 0,
name: '泊尔崖蜜蜜光面膜(5片盒装)',
url: 'bill',
imageurl: 'https://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/142/fb2960bf8e074d029c24315279289c19-5_218x274_70.jpg',
newprice: "86",
oldprice: "88",
discount: "8.8",
height: 0,
},
{
goodId: 1,
name: '透无瑕矿物养护两用粉饼#03',
url: 'bill',
imageurl: 'https://a.appsimg.com/upload/brand/upcb/2017/10/26/77/ias_150899004322921_604x290_80.jpg!75.webp',
newprice: "147.00",
oldprice: "150.00",
discount: "8.8",
height: 0,
},
{
goodId: 2,
name: '川水水光面膜(5片盒装)',
url: 'bill',
imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/86/7891361fdab348a1bc91aeca31fc77b1-5_218x274_70.jpg',
newprice: "86.00",
oldprice: "88.00",
discount: "8.8",
height: 0,
},
{
goodId: 3,
name: '蜜三色渐变咬唇膏3.2g 03蜜橙动心恋',
url: 'bill',
imageurl: 'http://a3.vimage1.com/upload/merchandise/pdcvis/2017/08/21/176/c3b9453a4d7f46c6a8fe78705f77352b-5_218x274_70.jpg',
newprice: "97.00",
oldprice: "99.00",
discount: "8.8",
height: 0,
},
{
goodId: 4,
name: '时焕颜亮采套装',
url: 'bill',
imageurl: 'https://a2.vimage1.com/upload/merchandise/pdcvis/2017/08/21/93/69a6bc1c11eb4be184b7dffb43b8565b-5_218x274_70.jpg',
newprice: "398.00",
oldprice: "459.00",
discount: "8.8",
height: 0,
}
];

let baseId = "img-" + (+new Date());

for (let i = 0; i < images.length; i++) {
images[i].id = baseId + "-" + i;
}

this.setData({
loadingCount: images.length,
images: images
});
}

})

如下代码:
if (col1.length <= col2.length) {
col1.push(imageObj);
} else {
col2.push(imageObj);
}

检索商品集合根据高度分别放入两个集合中。

####xxx.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
page{  
height: 100%;
background-color: #F3F4F6;
}
/* 单个图片容器的样式 */
.img_item {
width: 48.5%;
margin: 2px;
display: inline-block;
vertical-align: top;
background-color: #ffffff;
font-size: 24rpx;

}
.item_info{
border-top:1px dashed red;
}
.product-name{
color: #000;
/* height: 28px; */
text-align:left;
margin: 0px 5px;
margin-bottom: 5px;
}
.product-price-wrap .product-price-new{
color: #e80080;
margin-left:5px;
font-weight:900;
}
.product-price-wrap .product-price-old{
color: #888;
text-decoration: line-through;
padding-left: 2px;
}
.product-price-wrap .discount{
margin-left: 30px;
background-color: #000;
color: #fff;
}

好了,商品列表流式布局方式 代码示例已经讲完了,赶紧尝试一下吧!

####更多精彩内容
微信小程序电商实战-入门篇
微信小程序电商实战-首页(上)
微信小程序电商实战-首页(下)
微信小程序电商实战-商品详情(上)
微信小程序电商实战-商品列表流式布局
微信小程序实战篇:基于wxcharts.js绘制移动报表
微信小程序实战篇:商品属性联动选择(案例)

####关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言(源码名称+邮箱),小萌看到后会联系作者发送到邮箱,也可以加入交流群和作者互撩哦~~~

IT实战联盟.jpg

上一篇