小程序加载分页数据并筛选对应的种类并渲染

小程序加载分页数据并筛选对应的种类并渲染，可以按照以下步骤进行：

1. 在页面中添加一个滚动容器组件，例如 scroll-view 组件，用于展示分页数据。

2. 在页面中添加一个筛选器组件，例如 picker 组件，用于筛选对应的种类。

3. 在页面的 onLoad 生命周期函数中，发起第一页数据请求，并将请求到的数据保存到页面数据中。

4. 在滚动容器组件的 onScrollToLower 事件中，判断是否已经加载完所有数据，如果没有，则发起下一页数据请求，并将请求到的数据追加到页面数据中。

5. 在筛选器组件的 onChange 事件中，根据选择的种类，筛选出符合条件的数据，并更新页面数据。

6. 在页面的 setData 方法中，根据页面数据渲染页面。

以下是一个简单的示例代码：

<scroll-view scroll-y="true" bindscrolltolower="loadMoreData">
  <view wx:for="{{dataList}}" wx:key="{{index}}">
    <!-- 根据数据渲染页面 -->
  </view>
</scroll-view>

<picker mode="selector" range="{{categoryList}}" bindchange="filterData">
  <view>筛选</view>
</picker>

Page({
  data: {
    dataList: [], // 分页数据
    categoryList: ['种类1', '种类2', '种类3'], // 种类列表
    selectedCategory: '', // 选中的种类
    page: 1 // 当前页码
  },

  onLoad: function() {
    // 发起第一页数据请求
    this.loadData(1)
  },

  loadData: function(page) {
    wx.showLoading({
      title: '加载中...'
    })
    // 发起数据请求，并将数据保存到 this.data.dataList 中
    // 请求成功后，隐藏加载中提示框
  },

  loadMoreData: function() {
    // 判断是否已经加载完所有数据
    if (this.data.page < totalPage) {
      // 发起下一页数据请求
      this.loadData(this.data.page + 1)
    }
  },

  filterData: function(event) {
    // 获取选择的种类
    const selectedCategory = this.data.categoryList[event.detail.value]
    // 根据选择的种类筛选数据
    const filteredData = this.data.dataList.filter(item => item.category === selectedCategory)
    // 更新页面数据
    this.setData({
      selectedCategory,
      dataList: filteredData
    })
  }
})