如何在不使用url功能的前提下实现w2ui grid的无限滚动

该需求完全可以实现，无需依赖w2ui Grid原生的url配置能力，核心思路是替换或拦截组件的默认数据请求逻辑，自行发起携带凭证头的接口请求，再将返回数据同步给网格组件完成渲染和滚动加载。

可行实现思路 #

• 方案1：重写onRequest事件拦截默认请求（灵活性最高，最常用）
  初始化Grid时先开启无限滚动配置infinite: true，无需填写url参数，绑定onRequest事件回调。在回调内调用event.preventDefault()阻止组件默认的请求行为，手动用fetch/axios等请求工具发起接口调用，请求头中自行携带需要的凭证信息。请求拿到后端返回的分页数据后，调用Grid的add()方法追加数据，同时更新Grid的total属性告知组件总数据量，组件会自动判断是否还有更多数据可加载。
  示例代码：

  const grid = new w2ui.Grid({
    name: 'myGrid',
    box: '#gridBox',
    infinite: true, // 开启无限滚动模式
    columns: [/* 你的列配置 */],
    onRequest: function(event) {
      event.preventDefault() // 阻止组件默认的请求逻辑
      // 从事件对象中获取组件计算好的分页参数：偏移量、每页条数
      const { offset, limit } = event.detail
      // 自定义发起请求，携带凭证头
      fetch('/your/api/endpoint', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer ' + yourAuthToken, // 自定义的凭证头
          'Content-Type': 'application/json'
        },
        credentials: 'include' // 跨域场景需要携带Cookie时添加
      }).then(res => res.json()).then(resData => {
        // 追加返回的列表数据到Grid
        this.add(resData.records)
        // 更新总数据量，组件会根据offset+limit和total的差值判断是否还有下一页
        this.total = resData.total
      })
    }
  })
  

• 方案2：全局配置w2ui默认请求头（改造成本最低）
  如果你的凭证信息是全局通用的，可以直接修改w2ui的全局请求配置，给所有w2ui发起的请求默认加上需要的凭证头，配置完成后就可以直接使用Grid原生的url属性和无限滚动能力，不需要额外修改请求逻辑。
  示例代码：

  // 全局配置w2ui所有请求的默认请求头
  w2utils.settings.headers = {
    'Authorization': 'Bearer ' + yourGlobalAuthToken
  }
  // 跨域场景需要携带Cookie时添加该配置
  w2utils.settings.credentials = 'include'
  
  // 之后正常配置Grid的url和无限滚动即可
  const grid = new w2ui.Grid({
    name: 'myGrid',
    box: '#gridBox',
    infinite: true,
    url: '/your/api/endpoint', // 直接使用原生url配置
    columns: [/* 你的列配置 */]
  })
  

• 方案3：监听滚动事件手动控制加载（适合高度自定义场景）
  如果上述两种方案都无法满足你的个性化需求，可以自行监听Grid滚动容器的scroll事件，计算滚动条距离底部的阈值，当距离小于阈值时触发下一页加载逻辑。同样用自定义请求工具携带凭证头调用接口，拿到数据后追加到Grid即可，需要自己维护当前页码、加载中状态、是否还有更多数据的标识，避免重复请求。

注意事项 #

• 无限滚动模式下后端接口需要支持按偏移量（offset）和每页数量（limit）返回分页数据，同时返回总数据量
• 如果接口是按页码（page）分页，可以自行将offset换算为page：page = Math.floor(offset / limit) + 1
• 追加数据时要注意做去重处理，避免滚动时重复加载相同数据

内容的提问来源于stack exchange，提问作者mariogarcia