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

2021-08-15 02:15:42 字數 1591 閱讀 7147

it實戰聯盟部落格：

流式布局也叫百分比布局


把元素的寬,高,margin,padding不再用固定數值,改用百分比,


這樣元素的寬,高,margin,padding會根據頁面的尺寸隨時


調整已達到適應當前頁面的目的.
先看效果：

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

直接看**：

####***.wxml

}


￥}￥}


}折 


}￥}￥}


}折
通過檢視class標籤發現有兩個img_item，所以採取的是左右分別載入資料方式。

####***.js

page(,


onload: function () );


//載入首組


this.loadimages();}})


},onimageload: function (e) 


}imageobj.height = imgheight;


let loadingcount = this.data.loadingcount - 1;


let col1 = this.data.col1;


let col2 = this.data.col2;


//判斷當前新增到左列還是右列


if (col1.length <= col2.length) else 


let data = ;


//當前這組已載入完畢，則清空臨時載入區域的內容


if (!loadingcount) 


this.setdata(data);


},loadimages: function () ,,,


,];let baseid = "img-" + (+new date());


for (let i = 0; i < images.length; i++) 


this.setdata();


}})
如下**：

if (col1.length <= col2.length) else

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

####***.wxss

page 


/* 單個容器的樣式 */


.img_item 


.item_info


.product-name


.product-price-wrap .product-price-new


.product-price-wrap .product-price-old


.product-price-wrap .discount
好了，商品列表流式布局方式 **示例已經講完了，趕緊嘗試一下吧！

it實戰聯盟部落格：

微信小程式電商常用滾動套路

這裡需要借助這個屬性來指定顯示tab 2.scroll left 借助left來使scroll能讓遮蓋的tab動畫顯出 更多 import wepy from wepy 模擬資料 let mockdata 測試資料第三方的撒范德薩發大幅度暗室逢燈發達發 測試資料第三方的撒范德薩發大幅度暗室逢燈發達發...

微信小程式實戰入門

一 簡介 參考 二 工程 參考 quickstart basic file.html 工具設計介面可調整機型 顯示百分比 資料連線方式。三 發布 個人上線了乙個木材材積計算器 兩天做的，有web前後端經驗很容易入手，有增加 共計 記錄功能 審核很快，一天審核結束 後來發現已經之前有公司做了，尷尬，而...

微信小程式 開發列表

一.知識點 tip wx for array 可以等於引數名，在js中呼叫 page 獲取值 也可以直接把wx for 把值放在上面 1.在元件上使用wx for控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為ite...