小程序触底分页加载后台数据，筛选对应的种类并渲染

首先，你需要在小程序页面上添加滚动事件，监听是否触底。当触底时，触发一个函数来进行分页加载数据。

在加载数据的函数中，你可以向后台发送请求，获取数据并进行筛选。筛选数据的方式可以根据你的需求来定，可以通过请求参数传递筛选条件，也可以在前端进行筛选。

获取到符合条件的数据后，你可以将数据保存在一个数组中，并调用小程序的 setData 函数来更新页面数据。

具体的代码实现可以参考以下示例：

1. 在页面 onLoad 中初始化数据

Page({
  data: {
    dataList: [], // 数据列表
    pageNo: 1, // 当前页码
    pageSize: 10, // 每页数据条数
    category: '' // 种类筛选条件
  },
  onLoad: function () {
    this.loadData()
  },
  // 加载数据函数
  loadData: function () {
    let { dataList, pageNo, pageSize, category } = this.data
    // 发送请求，获取数据
    wx.request({
      url: 'your-api-url',
      data: {
        pageNo,
        pageSize,
        category
      },
      success: res => {
        let newDataList = res.data.data
        if (newDataList.length > 0) {
          // 将新数据拼接到原有数据列表中
          dataList = dataList.concat(newDataList)
          this.setData({
            dataList,
            pageNo: pageNo + 1
          })
        }
      }
    })
  }
})

2. 监听页面滚动事件，判断是否触底

Page({
  // ...
  // 监听页面滚动事件，判断是否触底
  onReachBottom: function () {
    this.loadData()
  }
})

3. 添加筛选种类功能

Page({
  data: {
    // ...
    categoryList: ['种类1', '种类2', '种类3'], // 种类列表
    categoryIndex: -1 // 当前选中的种类索引
  },
  // 监听种类选择器变化，更新筛选条件并重新加载数据
  bindCategoryChange: function (e) {
    let categoryIndex = e.detail.value
    let category = categoryIndex > -1 ? this.data.categoryList[categoryIndex] : ''
    this.setData({
      categoryIndex,
      category,
      dataList: [], // 清空数据列表
      pageNo: 1 // 重置页码
    })
    this.loadData()
  }
})

4. 在页面中渲染数据

<view class="container">
  <picker bindchange="bindCategoryChange" value="{{categoryIndex}}" range="{{categoryList}}" range-key="">{{categoryList[categoryIndex] || '全部'}}</picker>
  <view class="list">
    <block wx:for="{{dataList}}" wx:key="id">
      <view class="item">{{item.name}}</view>
    </block>
  </view>
</view>