从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

结束语

至此，列表页面已完成初步开发。