巧用Uni-app打造京东商城商品列表页面（上）

人工智能

2023-04-30 00:48:03

打造高效实用的京东商城商品列表页面：Uni-app开发指南

商品列表页面的重要性

在电子商务网站中，商品列表页面是购物旅程中至关重要的环节。它不仅展示了海量商品，还提供了用户与商品交互的入口。本文将深入探讨如何利用Uni-app开发一个高效、用户友好的京东商城商品列表页面，让用户轻松浏览、搜索和发现商品。

进入商品详情页面的途径

商品列表页面可以提供多种进入商品详情页面的方式：

商品楼层点击： 用户点击商品楼层的某个商品时，传递一个包含商品ID的查询参数。通过该ID，开发者可以获取商品详细信息，并跳转到详情页面。
分类页面点击： 当用户在分类页面中选择某个商品时，页面会传递一个包含该商品所属分类ID的参数。利用该ID，开发者可以获取该分类下的所有商品信息，并显示在商品列表页面中。
搜索页面点击： 用户在搜索页面中输入查询词并点击搜索按钮时，页面会传递一个包含查询词的参数。通过该查询词，开发者可以检索相关商品信息，并展示在商品列表页面中。

创建京东商城商品列表页面

1. 页面创建

在Uni-app项目中创建一个新的页面，并将其命名为goodlist。

2. 导入模块

引入mapState、getGoodsList等必要模块。

3. 定义数据

定义数据变量，包括商品列表、查询词、分类ID、分页信息、商品总数等。

4. 计算属性

使用计算属性获取用户信息等数据。

5. 生命周期函数

在onLoad生命周期函数中，执行获取商品列表的操作。

6. 获取商品列表数据

在getGoodsList方法中，发起请求获取商品列表数据，并根据查询词、分类ID和分页信息进行过滤。

7. 上拉加载更多

在onReachBottom生命周期函数中，实现上拉加载更多商品列表的功能。

8. 跳转到商品详情页面

在goGoodsDetail方法中，根据商品ID跳转到商品详情页面。

9. 渲染页面

在template选项中，使用u-list组件展示商品列表，并使用u-pagination组件实现分页功能。

代码示例

// goodlist.vue
<template>
  <view class="page-goodlist">
    <search-bar v-model="query" @search="getGoodsList"></search-bar>
    <u-list
      v-loading="loading"
      :list="goodsList"
      :loading-text="正在加载中..."
      @click.native="goGoodsDetail(item.id)"
    >
      <template v-slot:left>
        <image :src="item.image"></image>
      </template>
      <template v-slot:content>
        <h4>{{ item.name }}</h4>
        <p>{{ item.price }}</p>
      </template>
    </u-list>
    <u-pagination
      v-if="total > pageSize"
      :total="total"
      :page-size="pageSize"
      @page-change="getGoodsList"
    ></u-pagination>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { getGoodsList } from '@/api/goods';

export default {
  data() {
    return {
      loading: true,
      goodsList: [],
      query: '',
      cid: '',
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },

  computed: {
    ...mapState([
      'userInfo',
    ]),
  },

  onLoad() {
    this.getGoodsList();
  },

  methods: {
    getGoodsList() {
      this.loading = true;

      getGoodsList({
        query: this.query,
        cid: this.cid,
        page: this.page,
        pageSize: this.pageSize,
      }).then(res => {
        this.loading = false;
        this.goodsList = res.data.list;
        this.total = res.data.total;
      }).catch(err => {
        this.loading = false;
        console.error(err);
      });
    },

    onReachBottom() {
      if (this.loading) {
        return;
      }

      if (this.page * this.pageSize >= this.total) {
        return;
      }

      this.page++;
      this.getGoodsList();
    },

    goGoodsDetail(goodsId) {
      uni.navigateTo({
        url: `/pages/goods/detail/main?id=${goodsId}`,
      });
    },
  },
};
</script>