登录
转载

从0开发豆果美食小程序——listItem组件&列表

专栏API的典型场景应用
发布于 2021-02-22 阅读 29
  • APP
  • API
转载

效果图

图片描述

数据分析

搜索后跳转到菜谱列表页面,搜索时搜索的是菜的名字,所以要用查询菜谱名的接口,如下图。

图片描述

点击 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 + '&amp;menu=' + self.data.menuStr + '&amp;rn=' + rn + '&amp;pn=' + pn * rn + '&amp;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 &lt; 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 &lt; 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

结束语

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

评论区

励志做一条安静的鳄鱼。

0

0

0