Chapter four

1.商品列表效果圖

2商品列表分解圖

3.商品列表業(yè)務(wù)邏輯

1.加載商品列表數(shù)據(jù)

2.啟用下拉頁(yè)面功能

2.1.頁(yè)面的json文件中開(kāi)啟設(shè)置enablePullDownRefresh:true

2.2.頁(yè)面的js中，綁定事件onPullDownRefresh

3.啟用上拉頁(yè)面功能，onReachBottom頁(yè)面觸底事件

4.加載下一頁(yè)功能

4.接口API

1.獲取商品列表數(shù)據(jù)

https://api-hmugo-web.itheima.net/api/public/v1/goods/search

5.關(guān)鍵技術(shù)

1.小程序配置文件中啟用上拉和下拉功能

1.1啟用下拉功能

這個(gè)啟用下拉功能用來(lái)刷新，微信小程序文檔提供了刷新事件為onPullDownRefresh，首先需要在商品列表對(duì)應(yīng)的頁(yè)面配置進(jìn)行index.json添加為 "enablePullDownRefresh": true，然后觸發(fā)下拉刷新事件為onPullDownRefresh()，代碼如下：

這個(gè)觸發(fā)刷新事件后，就會(huì)重置數(shù)據(jù)的數(shù)組、重置頁(yè)碼為1、重新發(fā)送請(qǐng)求數(shù)據(jù)、數(shù)據(jù)請(qǐng)求成功回來(lái)，需要手動(dòng)的關(guān)閉并等待效果。

// 下拉刷新事件 
  >// 關(guān)閉下拉刷新的窗口 如果沒(méi)有調(diào)用下拉刷新的窗口 直接關(guān)閉也不會(huì)報(bào)錯(cuò)
 wx.stopPullDownRefresh();

因?yàn)檫@種等待效果大概5秒，刷新時(shí)大概一秒就完事！所以需要去關(guān)閉等待效果。注意：刷新和等待效果是兩回事。

在沒(méi)關(guān)閉等待效果的情況如下：

1.2啟用上拉功能

啟用上拉功能可以用來(lái)分頁(yè)，如果沒(méi)有分頁(yè)的話，想想如果數(shù)據(jù)量非常大時(shí)，然后一次性地返回所有數(shù)據(jù)給前臺(tái)，那么頁(yè)面的打開(kāi)速度及圖片加載就容易會(huì)下降。考慮到用戶使用流量，如果用戶只看第一頁(yè)的內(nèi)容，而不用看下面的內(nèi)容，這樣會(huì)浪費(fèi)流量。所以采取啟用上拉分頁(yè)來(lái)作優(yōu)化，當(dāng)使用上拉分頁(yè)的時(shí)候，后臺(tái)不需要一次性返回?cái)?shù)據(jù)給前臺(tái)，如果用戶需要下拉下面的內(nèi)容，那就會(huì)加載中加數(shù)據(jù)的內(nèi)容出來(lái)了。

實(shí)現(xiàn)思路原理：

當(dāng)用戶滾到底部的時(shí)候，開(kāi)始加載下一頁(yè)數(shù)據(jù)。首先找到觸發(fā)上拉事件（onReachBottom），然后判斷一下有沒(méi)有下一頁(yè)數(shù)據(jù)。首先我說(shuō)一下分頁(yè)頁(yè)數(shù)的詳細(xì)，首先獲取到總頁(yè)數(shù) 也就是說(shuō)獲取數(shù)據(jù)內(nèi)容的條數(shù)，然后計(jì)算最后的總頁(yè)數(shù)，比如：總頁(yè)數(shù)=Math.ceil(總條數(shù)/每一頁(yè)數(shù)據(jù)的行數(shù))，每一頁(yè)數(shù)據(jù)的行數(shù)就是顯示一頁(yè)數(shù)據(jù)的多少行，比如這個(gè)顯示一頁(yè)數(shù)據(jù)為10行，那么它就是10，假如為Math.ceil(23/10)=3。Math.ceil就是向上取舍近整數(shù)，比如2.3取為3。然后這樣獲取到當(dāng)前的頁(yè)碼，判斷一下當(dāng)前的頁(yè)碼是否大于等于總頁(yè)數(shù)，如果沒(méi)有下一頁(yè)數(shù)據(jù)，那么到這為止，并彈出提示框；如果有下一頁(yè)數(shù)據(jù)，然后來(lái)加載下一頁(yè)的數(shù)據(jù)，增加當(dāng)前的頁(yè)碼+1，重新發(fā)送請(qǐng)求數(shù)據(jù)并加載下一頁(yè)的新數(shù)據(jù)內(nèi)容，注意：如果數(shù)據(jù)請(qǐng)求回來(lái)，必須要對(duì)data中的數(shù)據(jù)進(jìn)行拼接，而不是全部替換掉的！

1.找到觸發(fā)上拉事件（onReachBottom）

2.判斷有沒(méi)有下一頁(yè)數(shù)據(jù)

2.1首先獲取總條數(shù)

計(jì)算： 總頁(yè)數(shù) = Math.ceil(總條數(shù) / 每一頁(yè)數(shù)據(jù)的行數(shù))

2.2獲取到當(dāng)前的頁(yè)碼

2.3判斷一下 當(dāng)前的頁(yè)碼是否>=總頁(yè)數(shù)

3.如果沒(méi)有下一頁(yè)數(shù)據(jù)，彈出一個(gè)提示框“沒(méi)有下一頁(yè)了”。

4.如果還有下一頁(yè)數(shù)據(jù) 然后來(lái)加載下一頁(yè)數(shù)據(jù)

4.1 增加當(dāng)前的頁(yè)碼+1

4.2 重新發(fā)送請(qǐng)求數(shù)據(jù)并加載下一頁(yè)的新數(shù)據(jù)內(nèi)容

4.3 如果數(shù)據(jù)請(qǐng)求成功回來(lái)，要對(duì)data中的數(shù)據(jù)進(jìn)行拼接

// 接口要的參數(shù)
    QueryParams:{
        query:"",
        cid:"",
        pagenum:1,
        pagesize:10
    },
 // 總頁(yè)數(shù)
    totalPages:1,
/**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
   ><view class="tabs">
    <view class="tabs_title">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item  {{item.isActive?'active':''}}"
        bindtap="handleItemTap"
        data-index="{{index}}"
        >
            {{item.value}}
        </view>
    </view>
    
</view>

我相信讀者小程序開(kāi)發(fā)的基礎(chǔ)或Vue的基礎(chǔ)都能看懂，什么的語(yǔ)法糖其實(shí)很像Vue，我說(shuō)明一下這些的作用：

1.wx:for="{{tabs}}"主要是用來(lái)渲染列表，需要的是組件之外傳入，也可以在js的組件中里面自定義個(gè)數(shù)組。

2.以上的循環(huán)完成之后一般需要加上wx:key="id"及data-index="{{index}}"，它們主要用來(lái)唯一標(biāo)識(shí)每一項(xiàng)，這樣后面對(duì)每一項(xiàng)的ID進(jìn)行操作，因?yàn)槲覀兂绦蛞话阋鞔_知道切換每一個(gè)項(xiàng)的操作，而且在切換到不同項(xiàng)的做出對(duì)應(yīng)的操作，如果沒(méi)有定義這些數(shù)據(jù)，那么后面工作會(huì)bug。

3.class="{{item.isActive?'active':' '}}"主要表示已選中的某一項(xiàng)，當(dāng)該項(xiàng)被選中后需要改變某顏色，比如：當(dāng)active與當(dāng)前項(xiàng)的索引isActive相等時(shí)才表示選中。

4.bindtap=“handleItemTap”表示觸發(fā)點(diǎn)擊事件，同時(shí)在js中觸發(fā)并進(jìn)行操作。

另外<slot>標(biāo)簽其實(shí)就是叫插槽，在每不同的標(biāo)題欄會(huì)有不同的顯示，一般在顯示內(nèi)容的頁(yè)面，這個(gè)slot也可以控制顯示與隱藏功能。

2.JS

components/Tabs/Tabs.js，這個(gè)主要是用子組件向父組件傳遞數(shù)據(jù)

其實(shí)原理上來(lái)說(shuō)，當(dāng)點(diǎn)擊事件觸發(fā)的時(shí)候，也需要觸發(fā)父組件的自定義事件，這樣同時(shí)傳遞數(shù)據(jù)給父組件。

比如：this.triggerEvent("父組件自定義事件的名稱(chēng)"，要傳遞的參數(shù))

// components/Tabs/Tabs.js
Component({
    /**
     * 組件的屬性列表
     */
    {//里面存放的是要從父組件中接收的數(shù)據(jù)
    properties: {
        tabs:{
            type:Array,
            value:[]
        }
    },

    /**
     * 組件的初始數(shù)據(jù)
     */
    data: {

    },

    /**
     * 組件的方法列表
     */
    methods: {
        // 1 點(diǎn)擊事件
          /*點(diǎn)擊事件觸發(fā)的時(shí)候
          觸發(fā)父組件中的自定義事件，同時(shí)傳遞數(shù)據(jù)給父組件
          this.triggerEvent("父組件自定義事件的名稱(chēng)"，要傳遞的參數(shù))*/

        handleItemTap(e){
            //1 獲取點(diǎn)擊的索引,獲取ID的值
            const {index}=e.currentTarget.dataset;
            //2 觸發(fā) 父組件中的事件 自定義
            this.triggerEvent("tabsItemChange",{index});
        }
    }
})

3.wxss

這是最基本的樣式文件，這個(gè)很簡(jiǎn)單，詳細(xì)不多說(shuō)了！

/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
    display: flex;
    padding:15rpx 0;

}
.title_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    padding:15rpx 0;
}
.active{
    color:var(--themeColor);
    border-bottom:5rpx solid currentColor;
}
.tabs_content{}

以上的內(nèi)容，這就是子組件的Tabs。然后接下來(lái)是父組件：

接下來(lái)的是Page/goods_list/index,這是商品列表的頁(yè)面。

1.WXML

Page/goods_list/index.wxml，這作為綁定標(biāo)簽和父組件的自定義事件，如下：

我先說(shuō)說(shuō)一下，我只針對(duì)slot標(biāo)簽的事，其他不用管，它們都是從后臺(tái)數(shù)據(jù)過(guò)來(lái)的，我們根據(jù)數(shù)組的isActive用來(lái)判斷點(diǎn)擊哪個(gè)標(biāo)題欄與對(duì)應(yīng)的父組件向子組件傳遞標(biāo)簽和內(nèi)容。

<!-- 監(jiān)聽(tīng)自定義事件 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
    <!-- 內(nèi)容 -->
    <block wx:if="{{tabs[0].isActive}}">
        <view class="first_tab">
            <navigator class="goods_item"
            wx:for="{{goodsList}}"
            wx:key="goods_id"
            url="/pages/goos_detail/index?goods_id={{item.goods_id}}"
            >
                <!-- 左側(cè) 圖片容器 -->
                   
                <!-- 右側(cè) 商品容器 -->
                  
            </navigator>

        </view>
    </block>
    
    <block wx:elif="{{tabs[1].isActive}}">1</block>

    <block wx:elif="{{tabs[2].isActive}}">2</block>
</Tabs>

然后子組件（components/Tabs/Tabs.wxml），slot的標(biāo)簽并接收到數(shù)據(jù)并顯示內(nèi)容。

 <view class="tabs_content">
        <slot></slot>
 </view>

2.JS

在js父組件中的數(shù)據(jù)與自定義事件。

Page({
    data: {
       tabs:[
           {
               id:0,
               value:"綜合",
               isActive:true
           },
           {
               id:1,
               value:"銷(xiāo)量", 
               isActive:false
           },
           {
                id:2,
                value:"價(jià)格",
                isActive:false
           }
       ],
       goodsList:[]
    },

    //標(biāo)題點(diǎn)擊事件 從子組件傳遞過(guò)來(lái)
   handleTabsItemChange(e){
       // 1 獲取被點(diǎn)擊的標(biāo)題索引
       const {index}=e.detail;
       // 2 修改源數(shù)組   
       let {tabs}=this.data;
       //循環(huán)數(shù)組
     //[].forEach遍歷數(shù)組，它在遍歷數(shù)組的時(shí)候修改了v，也會(huì)導(dǎo)致原數(shù)組被修改
       tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
       // 3 賦值到data中
       this.setData({
           goodsList:res.goods
       })
   }
)}

這樣搞定OK！

最終如下：

下一期就是小程序商品詳情-five

不斷更新中.....給知識(shí)充電中。

歡迎各位大佬評(píng)論、點(diǎn)贊和收藏！Thanks