小程序学习笔记：实现分页加载商铺列表数据并渲染 UI

在微信小程序开发中，实现分页加载指定分类下的商铺列表数据，并进行 UI 渲染是常见的功能需求。本文将详细介绍这一功能的实现过程，包括 API 接口调用、数据请求、数据处理以及 UI 渲染和样式美化，同时附上相应代码，帮助大家更好地理解和实践。

一、API 接口与数据请求

（一）API 接口地址

我们要调用的 API 接口地址包含一个动态参数:cat_id，这个参数用于指定分类的 ID。例如，如果要请求美食分类下的所有商铺列表，就需要将美食对应的分类 ID 填充到:cat_id的位置；若请求卡拉 OK 分类下的商品信息，则填充卡拉 OK 对应的分类 ID。假设接口地址为https://example.com/api/shops/:cat_id，实际使用时需替换为真实有效的接口地址。

（二）请求方式与参数

请求方式为 GET，在请求时还需要携带两个参数：_page和_limit。_page表示要请求第几页的数据，例如请求第一页数据时，_page的值为 1；请求第二页时，_page的值为 2。_limit用于指定每页请求多少条数据，比如设置每页请求 10 条或 15 条数据。

（三）在小程序中发起请求

打开微信开发者工具，找到shop_list.js文件，在data节点中声明相关数据：

data: {
    shopList: [], // 用于存放所有商铺的信息
    _page: 1, // 默认请求第一页数据
    pageSize: 10, // 每页默认获取10条数据
    total: 0 // 记录当前分类下的总数据条数
}

接着，定义获取商铺列表数据的方法getShopList：

getShopList() {
    const { _page, pageSize } = this.data;
    const catId = this.data.query.cat_id; // 从页面参数中获取分类ID
    const url = `https://example.com/api/shops/${catId}?_page=${_page}&_limit=${pageSize}`;
    wx.request({
        url,
        method: 'GET',
        success: (res) => {
            console.log(res);
            // 将新获取的数据拼接到shopList中
            this.setData({
                shopList: [...this.data.shopList, ...res.data],
                total: parseInt(res.header['X-Total-Count'])
            });
        }
    });
}

在onLoad生命周期函数中调用getShopList方法，以便在页面加载时获取数据：

onLoad(options) {
    this.setData({
        query: options
    });
    this.getShopList();
}

二、UI 渲染与样式美化

（一）渲染 UI 结构

打开shop_list.wxml文件，构建商铺列表的 UI 结构：

    
        
    
    
        {
  
  {item.name}}
        {
  
  {item.phone}}
        {
  
  {item.address}}
        {
  
  {item.businessHours}}
    

上述代码使用wx:for指令循环渲染每个商铺的信息，每个商铺包含左侧的图片和右侧的基本信息（名称、电话、地址、营业时间）。

（二）样式美化

打开shop_list.wxss文件，编写样式代码：

.shop-item {
    display: flex;
    padding: 15rpx;
    border: 1rpx solid #efefef;
    border-radius: 8rpx;
    box-shadow: 1rpx 1rpx 15rpx #ddd;
    margin-bottom: 15rpx;
}
 
.thumb {
    margin-right: 15rpx;
}
 
.thumb image {
    width: 250rpx;
    height: 250rpx;
    display: block;
}
 
.info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 24rpx;
}
 
.shop-title {
    font-weight: bold;
}

这些样式实现了图片和文本的左右布局，设置了图片和文本的样式，包括大小、对齐方式、加粗效果，还为每个商铺项添加了内边距、边框、圆角、阴影和间距，使页面更加美观。

通过以上步骤，我们完成了微信小程序中分页加载商铺列表数据并渲染 UI 的功能。从 API 接口调用、数据请求与处理，到 UI 结构渲染和样式美化，每个环节都紧密相连，共同构建出一个完整且用户体验良好的商铺列表页面。