前端开发实战：优化商铺列表页面的下拉刷新功能

在前端开发中，下拉刷新功能能显著提升用户体验，让用户方便地获取最新数据。今天就来和大家分享在开发商铺列表页面时，如何实现并优化下拉刷新功能，同时美化相关窗口样式。本文以微信小程序开发为例进行讲解。

阿贾克斯ajax0322

508人浏览 · 2025-01-26 22:45:18

阿贾克斯ajax0322 · 2025-01-26 22:45:18 发布

前端开发实战：优化商铺列表页面的下拉刷新功能

开启下拉刷新功能

在微信小程序里，开启下拉刷新很简单。找到商铺列表页面的.json配置文件，添加enablePullDownRefresh配置节点，把它的值从默认的false改成true，就能开启下拉刷新效果。

{
  "enablePullDownRefresh": true
}

保存配置后预览页面，手指从上往下滑动屏幕，就能看到下拉刷新效果了。不过，此时的下拉刷新窗口样式还是默认的，接下来进行美化。

美化下拉刷新窗口样式

要美化下拉刷新窗口样式，可以通过修改配置文件来实现。添加backgroundColor属性设置下拉刷新时窗口的背景颜色，比如设置为浅灰色#efefef；使用backgroundTextStyle属性设置三个小圆点的样式，设为dark。

{
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

保存修改后再次预览，下拉刷新时就能看到浅灰色背景和新样式的小圆点了。但要注意，在模拟器里，松手后下拉刷新效果会自动关闭，而真机上不会，实际开发时需要手动关闭。

实现下拉刷新功能

下拉刷新不只是视觉效果，还要实现数据更新。当下拉刷新时，要重置关键数据，如页码值、商铺列表数据和总数据条数，然后重新发起第一页的数据请求。

在 JavaScript 代码中，通过this.setData方法重置数据。假设代码中页码值用pageNum表示，商铺列表数据用shopList表示，总数据条数用total表示。

Page({
  data: {
    pageNum: 1,
    shopList: [],
    total: 0
  },
  onPullDownRefresh: function() {
    // 重置关键数据
    this.setData({
      pageNum: 1,
      shopList: [],
      total: 0
    });
    // 重新发起数据请求
    this.getShopList();
  },
  getShopList: function() {
    // 这里是发起网络请求获取数据的代码
    // 示例代码，实际需替换为真实请求逻辑
    wx.request({
      url: 'https://example.com/api/shops',
      data: {
        page: this.data.pageNum
      },
      success: (res) => {
        // 处理获取到的数据
        this.setData({
          shopList: res.data.shops,
          total: res.data.total
        });
      },
      complete: () => {
        // 这里先不处理关闭下拉刷新，后续优化
      }
    });
  }
});

保存代码后进行演示，就能看到下拉刷新时数据重置并重新请求第一页数据的效果了。

解决下拉刷新窗口不会自动关闭的问题

在真机上，下拉刷新数据加载完成后，窗口不会自动关闭。解决办法是在数据获取完成后调用微信的wx.stopPullDownRefresh方法。最初，可能会直接在getShopList方法的complete回调里调用。

getShopList: function() {
  wx.request({
    url: 'https://example.com/api/shops',
    data: {
      page: this.data.pageNum
    },
    success: (res) => {
      this.setData({
        shopList: res.data.shops,
        total: res.data.total
      });
    },
    complete: () => {
      wx.stopPullDownRefresh(); // 这样写有问题
    }
  });
}

但这种写法存在问题，因为getShopList方法不只是在下拉刷新时调用，页面加载和上拉触底时也会调用，而上拉触底时不需要关闭下拉刷新窗口。

优化方法是在调用getShopList方法时传递一个回调函数cb。在getShopList方法内部，判断是否有传递cb，有则调用。

getShopList: function(cb) {
  wx.request({
    url: 'https://example.com/api/shops',
    data: {
      page: this.data.pageNum
    },
    success: (res) => {
      this.setData({
        shopList: res.data.shops,
        total: res.data.total
      });
    },
    complete: () => {
      cb && cb(); // 按需调用回调函数
    }
  });
}

在下拉刷新的onPullDownRefresh事件里，调用getShopList时传递关闭下拉刷新的回调函数。

onPullDownRefresh: function() {
  this.setData({
    pageNum: 1,
    shopList: [],
    total: 0
  });
  this.getShopList(() => {
    wx.stopPullDownRefresh();
  });
}

这样，只有在下拉刷新时才会调用wx.stopPullDownRefresh关闭窗口，其他情况不会误操作，实现了按需调用。

经过这些步骤，商铺列表页面的下拉刷新功能就更完善了，不仅能正常刷新数据，窗口样式美观，还能在真机上自动关闭下拉刷新窗口，提升了用户体验。希望本文的分享能帮助大家在前端开发中更好地实现类似功能。