從0開發豆果美食小程序——listItem組件&列表

效果圖

數據分析

搜索後跳轉到菜譜列表頁面，搜索時搜索的是菜的名字，因此要用查詢菜譜名的接口，以下圖。

點擊 API 測試工具能夠看到參數說明。
pn 表示從第幾個數據開始返回，rn 表示一次返回多少個數據。若是 pn = 0，rn = 10；想要第一次請求返回的數據下標是 0～9，第二次請求返回的是 10～19，那麼須要 pn 每請求一次後加一， pn * rn 纔會返回所指望的結果。

返回數據舉例，以下圖。

組件結構

組件容器包含圖片、菜名和菜的分類標籤，結構較簡單。

<view wx:for="{{List}}" wx:key="index" class='container'>
    <image src='{{item.albums}}' mode='aspectFill'></image>
    <view class='title'>{{item.title}}</view>
    <view class='tag1'>{{item.tags[0]}}</view>
    <view class='tag2'>{{item.tags[1]}}</view>
</view>

組件功能

只須要由外部屬性傳來 list 數組就能夠了。

Component({
    properties:{
        List:{
            type:Array,
            value:[]
        }
    }
});

組件樣式

該組件樣式也很簡單，整個容器相對定位，title 和 tag 絕對定位。圖片比例 4:3，tag 字體顏色：#9e9e9e。

.container {
    position: relative;
    height: 210rpx;
    margin: 30rpx 0 0 30rpx;
}

.container image {
    width: 280rpx;
    height: 210rpx;
}

.container .title {
    position: absolute;
    top: 0rpx;
    left: 310rpx;
    font-size: 36rpx;
}

.container .tag1 {
    position: absolute;
    bottom: 0rpx;
    left: 310rpx;
    font-size: 20rpx;
    color: #9e9e9e;
}

.container .tag2 {
    position: absolute;
    bottom: 0rpx;
    left: 410rpx;
    font-size: 20rpx;
    color: #9e9e9e;
}

頁面邏輯

搜索後跳轉到列表頁面，爲搜索組件添加跳轉邏輯，在搜索組件（從0開發豆果美食小程序——搜索組件）的 handleSearch 方法和 onTap 方法中調用 wx.navigateTo ，同時將輸入的菜名經過查詢參數帶到 list 頁面。

wx.navigateTo({
    url: `/pages/list/index?menuStr=${this.data.inputValue}`,
});

在 onLoad 函數中讀取參數並存下來。

onLoad: function(options) {
    this.setData({
        menuStr: options.menuStr
    })
    this.handleRequest();
},

handleRequest 函數專門負責處理請求。從接口文檔的數據分析咱們知道須要維護一個 pageNumber 才能不斷獲取新數據。請求成功後，pageNumber + 1，讀取已存的 menuList，稱做 oldList，若是是首次請求，直接把數據放入 menuList，若是非首次請求，將數據拼接到 oldList 後再放入 menuList。這裏的拼接顯然是爲觸底刷新準備的，因此在 onReachBottom 函數中調用的也是 handleRequest。

因爲接口返回的 tag 數量過多，這裏只截取其中兩個做爲 listItem 的標籤。

var appKey = require('../../config.js');
    const menuURL = 'https://apis.juhe.cn/cook/query?';
    
    data: {
        menuList: [],
        menuStr: '',
        pageNumber: 0,
    },

    handleRequest() {
        wx.showNavigationBarLoading()
        let self = this;
        const rn = 10; // 一次請求返回條數
        const albums = 1; // 封面圖片，默認是1
        let pn = self.data.pageNumber;
        wx.request({
            url: menuURL + 'key=' + appKey + '&menu=' + self.data.menuStr + '&rn=' + rn + '&pn=' + pn * rn + '&albums=' + albums,
            data: {
                result: []
            },
            success: function(res) {
                let oldList = self.data.menuList;
                let data = res.data.result.data;
                pn += 1; 
                if (oldList.length == 0) {
                    for (let i = 0; i < 10; i++) {
                        data[i].tags = data[i].tags.split(";", 4).slice(1, 3);
                    }
                    self.setData({
                        menuList: data,
                        pageNumber: pn,
                    })
                } else {
                    for (let i = 0; i < 10; i++) {
                        data[i].tags = data[i].tags.split(";", 4).slice(1, 3);
                    }
                    self.setData({
                        menuList: oldList.concat(data),
                        pageNumber: pn,
                    })
                }
                wx.hideNavigationBarLoading()
            }
        });
    },

onReachBottom: function() {
    this.handleRequest();
},

頁面 json

{
    "usingComponents": {
        "ck-listItem": "/components/listItem/index"
    }
}

頁面 wxml

<ck-listItem List="{{menuList}}"></ck-listItem>

配色工具

MATERIAL DESIGN Design Develop Tools

結束語

至此，列表頁面已完成初步開發。