在电商平台的APP中，用户总是希望第一眼看到自己所在城市的商品。这样的小细节能大大提升用户体验。今天，我们就来聊聊如何在uni-app中实现这个功能——首页商品排序，让当前城市的商品优先显示。

问题背景：想象一下，你打开APP，满屏都是千里之外的商品，是不是感觉有点遥远？但如果看到的都是自己城市的商品，是不是感觉亲切多了？这就是我们要解决的问题：如何在uni-app的首页上，让用户首先看到自己所在城市的商品。

解决方案：

1. 获取用户位置：

• 首先，我们需要知道用户所在的城市。这可以通过获取用户授权的位置信息来实现。

2. 请求商品数据：

• 接下来，我们向服务器请求商品数据。这一步通常会在页面加载时进行。

3. 排序逻辑：

• 拿到商品数据后，我们需要对这些数据进行排序。首先，我们将当前城市的商品挑出来，然后让它们排在列表的前面。

4. 代码实现：

• 我们通过一段简单的代码来实现这个逻辑。代码中，我们首先检查用户存储在本地的userCity信息，然后根据这个信息来对商品列表进行排序。

示例代码：

// 假设我们已经获取了商品列表let that = this;getProductsList({  // ...其他参数}).then(res => {  console.log('首页:推荐商品列表', res);  // 如果获取到当前城市，就优先展示当前城市商品  let list = res.data.list;  let city = uni.getStorageSync('userCity');  if (city) {    console.log("userCity", city);    let newList1 = []; // 当前城市商品列表    let newList2 = []; // 其他城市商品列表    for (let i = 0; i < list.length; i++) {      if (city.includes(list[i].city_name) || list[i].city_name.includes(city)) {        newList1.push(list[i]); // 当前城市商品放前面      } else {        newList2.push(list[i]);      }    }    console.log("newList1", newList1);    console.log("newList2", newList2);    // 排序后重新合并    list = newList1.concat(newList2);  }  this.tempArr = list; // 更新商品列表});

实施步骤：

1. 获取位置信息：在用户授权的前提下，获取用户所在城市。
2. 请求商品数据：在首页加载时，向服务器请求商品数据。
3. 排序逻辑：根据用户所在城市，对商品列表进行排序。
4. 更新列表：将排序后的商品列表更新到首页。

总结：通过这个小技巧，我们可以让uni-app首页的商品列表更加贴心，让用户第一眼就看到自己所在城市的商品。这不仅提升了用户体验，也让APP显得更加智能。

关于码斯阁：在码斯阁，我们致力于提供实用的技术解决方案，帮助开发者解决实际问题。如果你在开发过程中遇到任何难题，欢迎来找我们聊聊。