電商類(lèi)小程序?qū)崙?zhàn)教程vol2列表加載

1、Vol.2：列表加載旗下的玩物志小程序作為 Demo，類(lèi)小程序?qū)崙?zhàn)在上一期文章中，我們以愛(ài)了首頁(yè) banner 部分的開(kāi)發(fā)，以及小程序內(nèi)置組件、數(shù)據(jù)綁定和請(qǐng)求 API 的用法。本期，知曉程序依然以玩物志小程序?yàn)榛A(chǔ)，為大家?guī)?lái)有關(guān)于列表加載的實(shí)現(xiàn)。為布局而生的flex 傳統(tǒng)的布局方式一般都是基于div盒子模型，利用float,position,display來(lái)進(jìn)行布局。每個(gè)前端開(kāi)發(fā)者對(duì)這些布局方式都非常熟悉。對(duì)一些特殊的布局來(lái)說(shuō)，使用這些屬性并不方便，由此還衍生出各種 hack 方案。直到 CSS3 提出了專(zhuān)為布局而生的解決方案，就是flex 布局。但是，由于瀏覽器的兼容問(wèn)題，大多數(shù)開(kāi)發(fā)者都不

2、敢將flex布局直接應(yīng)用到實(shí)際項(xiàng)目之中。在常規(guī)項(xiàng)目中，大量應(yīng)用flex布局還需要一個(gè)過(guò)程。而對(duì)于 WeChat Only 的小說(shuō)，則完全不用擔(dān)心有非常復(fù)雜，所以，也不瀏覽器兼容的問(wèn)題，它只要適配客戶(hù)端即可。同時(shí)，由于小程序的布局用過(guò)多地?fù)?dān)心大量使用 flex引起的性能問(wèn)題。我們可以放心地在小使用flex定義的一個(gè)布局。如何，可以根據(jù)更方便地使用rpxrpx的全稱(chēng)是 responsive pixel，它是小程序當(dāng)前設(shè)備的屏幕寬度進(jìn)行自適應(yīng)。小規(guī)定，所有的設(shè)備屏幕寬度都為750rpx，根據(jù)設(shè)備屏幕實(shí)際寬度的不同，1rpx所代表的實(shí)際像素值也不一樣。例如，在6 上，屏幕實(shí)際寬度5 上，屏幕實(shí)際寬度為

3、為375px，則 750rpx=375px，1rpx=0.5px；而在320px，則750rpx=320px，1rpx=0.42px。其實(shí)，我們并不必關(guān)心每種設(shè)備屏幕下1rpx到底代表多少個(gè)像素，只要抓住 所有的設(shè)備屏幕寬度都為750rpx這個(gè)原則，就能很好地實(shí)現(xiàn)對(duì)任意設(shè)備屏幕大小的自適應(yīng)布局。知曉程序（號(hào) zxcx0101）強(qiáng)烈建議設(shè)計(jì)用6 作為視覺(jué)稿的標(biāo)準(zhǔn)，進(jìn)行量取。比如，在總寬度即將視覺(jué)稿總寬度設(shè)成750px。這樣，開(kāi)發(fā)者就能很方便地對(duì)相關(guān)的為750px的6 視覺(jué)稿中，量取一個(gè)圖片的寬度為 200px，那么，這個(gè)圖片的寬度即可設(shè)置為200rpx。簡(jiǎn)單一句話(huà)解釋?zhuān)毫咳《嗌倬驮O(shè)置多少。fle

4、x配合 rpx的使用案例現(xiàn)在，我們就在小使用flex和rpx進(jìn)行布局，體驗(yàn)一下這種解決方案的便利。案例一：貨架列表來(lái)看看貨架列表的效果圖：首先還是貼兩段代碼。以下是 WXML 的實(shí)現(xiàn)：然后 WXSS 的代碼如下，我們?cè)陉P(guān)鍵代碼處已經(jīng)給出簡(jiǎn)要注釋?zhuān)汉?jiǎn)單幾步就完成了貨架列表的布局，并且完美兼容各種大小的設(shè)備屏幕。案例二：貨架分類(lèi)標(biāo)題再來(lái)一個(gè)例子，看一下商品列表貨架分類(lèi)的標(biāo)題：如上圖所示，貨架標(biāo)題居左，查看的圖標(biāo)居右并且垂直居中。代碼結(jié)構(gòu)如下：有經(jīng)驗(yàn)的同學(xué)一眼就可以看出，要實(shí)現(xiàn)需求需要： 讓 .shelf-title 向左浮動(dòng)讓 .shelf-more 水平方向右對(duì)齊、垂直方向居中最后還要給 .sh

5、elf-header clearfix 一下那現(xiàn)在來(lái)看看flex是怎么做的：只要區(qū)區(qū)幾行代碼，就能輕松使用flex調(diào)整排版。接下來(lái)，結(jié)合上一期的內(nèi)容，發(fā)起一個(gè)請(qǐng)求獲取數(shù)據(jù)，然后setData()綁定數(shù)據(jù)：貨架列表就完成了。template模板的使用我們?cè)賮?lái)看看，首頁(yè)的分類(lèi)列表和貨架分類(lèi)列表頁(yè)兩個(gè)頁(yè)面的對(duì)比：不難發(fā)現(xiàn)，這兩個(gè)頁(yè)面的列表的樣式是一模一樣的。那么，我們就可以把每個(gè)商品視為一個(gè)模塊，暫且把這個(gè)商品模塊稱(chēng)為入并進(jìn)行調(diào)用。product-card，我們可以將它用template封裝起來(lái)，在需要的地方就將它引這里先要弄清楚一個(gè)概念，template 的主要功能同的地方調(diào)用。的是在于定義一個(gè)

6、wxml 的代碼片段，然后在不template擁有的作用域，只能使用data傳入的數(shù)據(jù)。我們來(lái)看下template到底如何使用。1. 定義template模板為了方便代碼組織，我們?cè)趖emplates目錄下，新建一個(gè)建productCard文件夾，并在product-card文件夾下新文件。代碼如下：productCard.wxml和productCard.wxss使用name屬性定義模板的名字，然后將代碼片斷保template中。2. 引入template模板以首頁(yè)為例，當(dāng)要使用到productCard模板時(shí)，我們只需要使用import引入模板。在需要顯示的位置，外層用wx:for循環(huán)渲染列

7、表，template為子項(xiàng)，使用is用data傳入數(shù)據(jù)：留意一下data= .item 的寫(xiě)法，item是wx:for中代表數(shù)組當(dāng)前項(xiàng)的默認(rèn)變量名，item前面的. 操作符相當(dāng)于ES6中的展開(kāi)運(yùn)算符，可用于需要解構(gòu)賦值的地方，沒(méi)有了解過(guò)展開(kāi)運(yùn)算符和解構(gòu)（Destructuring）的同學(xué)可以先了解一下它們的基本概念。通過(guò)解構(gòu)，template中就可以直接寫(xiě)成 id , cover_image ，而不用寫(xiě) item.id , item.cover_image 。它的意義在于實(shí)現(xiàn)了template與wx:for-item之間的解耦，比如這里設(shè)置了wx:for-itemproduct，我們只要設(shè)改變

8、將是data= .product 就可以了。如果數(shù)據(jù)沒(méi)有通過(guò)解構(gòu)，就要template的 item.id 修改成 product.id ，很不方便。接下來(lái)productCard.wxss的引入。先在productCard寫(xiě)好樣式，這里就不貼代碼了。模板的 WXSS 文件如何引入首先請(qǐng)思考一下，在哪里可以引入 WXSS 文件？法是在用到productCard模板的頁(yè)app.wxss中引入。模板的頁(yè)面都不用再去面里引入，在這里是在list.wxss中import 進(jìn)來(lái)。另相比較法，這個(gè)方法只需要一次引入，而所有用到productCard引入productCard.wxss了。獲取商品列表數(shù)據(jù)，渲染視圖先通過(guò)onLoad的options取得貨架id：最后，調(diào)用列表。wx:request()獲取商品列表數(shù)據(jù)，通過(guò)setData()設(shè)置，即可在視圖層渲染出完整的到這里，一個(gè)像樣