微擎小程序重磅揭秘：页面跳转及加载更多功能全解析

2023-11-03 12:35:20

微擎小程序页面跳转详解

微擎小程序页面跳转主要有两种方式：相对路径跳转和绝对路径跳转。

相对路径跳转：使用相对路径跳转时，只需要在目标页面的路径前加上“/”即可。例如，如果当前页面是“page/index/index”，则跳转到“page/detail/detail”页面，只需要在“page/detail/detail”前加上“/”即可，即“/page/detail/detail”。

绝对路径跳转：使用绝对路径跳转时，需要写出目标页面的完整路径。例如，如果目标页面是“page/detail/detail”，则需要写出“/page/detail/detail”。

微擎小程序加载更多详解

微擎小程序加载更多主要有两种方式：上拉加载更多和下拉加载更多。

上拉加载更多：上拉加载更多是指当用户滚动到页面底部时，自动加载更多数据。上拉加载更多可以使用wx.onReachBottom()方法实现。在wx.onReachBottom()方法中，只需要发起一个网络请求，然后将返回的数据追加到当前数据中即可。

下拉加载更多：下拉加载更多是指当用户下拉页面时，自动加载更多数据。下拉加载更多可以使用wx.onPullDownRefresh()方法实现。在wx.onPullDownRefresh()方法中，只需要发起一个网络请求，然后将返回的数据追加到当前数据中即可。

微擎小程序页面跳转及加载更多实例解析

页面跳转实例

// 相对路径跳转
wx.navigateTo({
  url: '/page/detail/detail',
});

// 绝对路径跳转
wx.navigateTo({
  url: '/pages/detail/detail',
});

加载更多实例

// 上拉加载更多
wx.onReachBottom() {
  this.setData({
    loading: true,
  });

  wx.request({
    url: 'https://example.com/api/get_more_data',
    data: {
      page: this.data.page,
    },
    success: (res) => {
      this.setData({
        loading: false,
        data: this.data.data.concat(res.data.data),
        page: this.data.page + 1,
      });
    },
    fail: () => {
      this.setData({
        loading: false,
      });
    },
  });
}

// 下拉加载更多
wx.onPullDownRefresh() {
  this.setData({
    loading: true,
    page: 1,
  });

  wx.request({
    url: 'https://example.com/api/get_more_data',
    data: {
      page: this.data.page,
    },
    success: (res) => {
      this.setData({
        loading: false,
        data: res.data.data,
        page: this.data.page + 1,
      });
    },
    fail: () => {
      this.setData({
        loading: false,
      });
    },
  });
}