微信小程序電商實戰-商品列表流式布局

流式布局概念

流式布局也叫百分比布局 把元素的寬,高,margin,padding不再用固定數值,改用百分比, 這樣元素的寬,高,margin,padding會根據頁面的尺寸隨時 調整已達到適應當前頁面的目的.

如上圖所示，為了能夠看的更直觀一點我給布局設置了灰色實線邊框，整體頁面根據元素的百分比進行布局。

直接看代碼：
wxml

<view class="container"><scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages"><view class="goods" style="width:100%"><view class="img_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="img_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> </view>>

通過查看class標簽發現有兩個img_item ，所以采取的是左右分別加載數據方式。

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; //圖片設置的寬度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});}})

檢索商品集合根據高度分別放入兩個集合中。

wxss

page{ height: 100%; background-color: #F3F4F6; } /* 單個圖片容器的樣式 */ .img_item {width: 50%;display: inline-block;vertical-align: top;background-color: #ffffff;font-size: 24rpx;border: 2rpx solid #eeeeee;box-sizing: border-box;} .item_info{border-top:2rpx solid #eeeeee; } .product-name{color: #000;/* height: 28px; */text-align:left;margin: 0rpx 10rpx; margin-bottom: 10rpx; } .product-price-wrap .product-price-new{color: #e80080;margin-left:10rpx;font-weight:900; } .product-price-wrap .product-price-old{color: #888;text-decoration: line-through;padding-left: 4rpx; } .product-price-wrap .discount{margin-left: 60rpx;background-color: #000;color: #fff; }

總結

以上是生活随笔為你收集整理的微信小程序电商实战-商品列表流式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。