在uni-app中巧妙监听页面返回：更新数据轻松搞定

2023-07-24 03:33:44

巧用 onBackPress() 方法：实现 uni-app 页面返回时的数据更新

了解 onBackPress()

uni-app 中的 onBackPress() 方法可让我们监听页面返回事件，即当用户点击设备返回键或浏览器的后退按钮时触发。通过在页面返回时执行特定的函数，我们可以实现数据更新、页面跳转等操作。

语法

onBackPress(callback)

其中，callback 为页面返回时要执行的函数。

结合数据更新

在 uni-app 中，我们可以结合 onBackPress() 和 setData() 方法，在页面返回时更新数据。具体步骤如下：

定义一个数据变量，存储需要更新的数据。
在 onBackPress() 方法中，使用 setData() 方法更新数据变量的值。
在页面中，使用 {{ }} 语法将数据变量绑定到相应的元素上。

这样，当用户返回页面时，数据变量的值和页面元素的内容都会随之更新。

实战案例

案例 1：商品详情页的数据更新

在一个商品详情页中，当用户返回到商品列表页时，我们需要更新商品列表的数据，显示用户刚查看过的商品。

data() {
  return {
    productList: [], // 商品列表数据
  };
},
onBackPress() {
  // 获取最新的商品列表数据
  this.getProductList()
    .then((res) => {
      // 更新商品列表数据变量
      this.setData({
        productList: res.data,
      });
    });
},
getProductList() {
  // 模拟网络请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            id: 1,
            name: '商品 1',
            price: 100,
          },
          {
            id: 2,
            name: '商品 2',
            price: 200,
          },
        ],
      });
    }, 1000);
  });
}

案例 2：购物车页面的数据更新

在一个购物车页面中，当用户返回到首页时，我们需要更新购物车的数据，显示最新的购物车内容。

data() {
  return {
    cartList: [], // 购物车数据
  };
},
onBackPress() {
  // 获取最新的购物车数据
  this.getCartList()
    .then((res) => {
      // 更新购物车数据变量
      this.setData({
        cartList: res.data,
      });
    });
},
getCartList() {
  // 模拟网络请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            id: 1,
            name: '商品 1',
            price: 100,
            quantity: 1,
          },
          {
            id: 2,
            name: '商品 2',
            price: 200,
            quantity: 2,
          },
        ],
      });
    }, 1000);
  });
}