从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()
        }
    });
},</code></pre>

onReachBottom: function() {
    this.handleRequest();
},
页面 json
{
    "usingComponents": {
        "ck-listItem": "/components/listItem/index"
    }
}
页面 wxml
<ck-listItem List="{{menuList}}"></ck-listItem>
配色工具
MATERIAL DESIGN Design  Develop  Tools
结束语
至此，列表页面已完成初步开发。