很多商城小程序中,一般的商品列表是以流式布局方式展示,下面為大家介紹小程序如何制作商品列表流式布局?
流式布局概念
流式布局也叫百分比布局 把元素的寬,高,margin,padding不再用固定數(shù)值,改用百分比, 這樣元素的寬,高,margin,padding會(huì)根據(jù)頁(yè)面的尺寸隨時(shí) 調(diào)整已達(dá)到適應(yīng)當(dāng)前頁(yè)面的目的.
先看效果:
如上圖所示,為了能夠看的更直觀一點(diǎn)我給布局設(shè)置了紅色虛線邊框,整體頁(yè)面根據(jù)元素的百分比進(jìn)行布局。
直接看代碼:
xxx.wxml
<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>
通過(guò)查看class標(biāo)簽發(fā)現(xiàn)有兩個(gè)img_item ,所以采取的是左右分別加載數(shù)據(jù)方式。
xxx.js
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; //圖片設(shè)置的寬度 let scale = imgWidth / oImgW; //比例計(jì)算 let imgHeight = oImgH * scale; //自適應(yīng)高度 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; //判斷當(dāng)前圖片添加到左列還是右列 if (col1.length <= col2.length) { col1.push(imageObj); } else { col2.push(imageObj); } let data = { loadingCount: loadingCount, col1: col1, col2: col2 }; //當(dāng)前這組圖片已加載完畢,則清空?qǐng)D片臨時(shí)加載區(qū)域的內(nèi)容 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: '透無(wú)瑕礦物養(yǎng)護(hù)兩用粉餅#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蜜橙動(dòng)心戀', 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: '時(shí)煥顏亮采套裝', 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);
}**
檢索商品集合根據(jù)高度分別放入兩個(gè)集合中。
xxx.wxss
page{ height: 100%; background-color: #F3F4F6; } /* 單個(gè)圖片容器的樣式 */ .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; }
HiShop小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看:小程序商店