uni-app 排行榜增加筛选功能 以区分插件和项目demo

在uni-app中实现排行榜的筛选功能以区分插件和项目demo，可以通过以下步骤来实现。这里假设你已经有一个基本的排行榜页面，并且排行榜数据包含类型信息（插件或项目demo）。我们将利用Vue的条件渲染和事件处理来实现筛选功能。

1. 数据结构准备

首先，假设你的排行榜数据结构如下：

[
  {
    "id": 1,
    "name": "插件A",
    "type": "plugin",
    "rank": 1
  },
  {
    "id": 2,
    "name": "项目DemoB",
    "type": "demo",
    "rank": 2
  },
  // 更多数据...
]

2. 页面布局

在页面的<template>部分，添加一个筛选器和排行榜列表：

<template>
  <view>
    <picker mode="selector" :range="filterOptions" @change="onFilterChange">
      <view class="picker">{{selectedFilter}}</view>
    </picker>
    <view v-for="item in filteredList" :key="item.id">
      <text>{{item.rank}}. {{item.name}} ({{item.type}})</text>
    </view>
  </view>
</template>

3. 数据和方法

在<script>部分，定义数据和方法：

<script>
export default {
  data() {
    return {
      rankList: [/* 你的排行榜数据 */],
      filterOptions: ['全部', '插件', '项目Demo'],
      selectedFilter: '全部'
    };
  },
  computed: {
    filteredList() {
      if (this.selectedFilter === '全部') {
        return this.rankList;
      } else {
        return this.rankList.filter(item => item.type === this.selectedFilter.toLowerCase());
      }
    }
  },
  methods: {
    onFilterChange(e) {
      this.selectedFilter = this.filterOptions[e.detail.value];
    }
  }
};
</script>

4. 样式

在<style>部分，添加一些基本样式（可选）：

<style scoped>
.picker {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}
</style>

总结

以上代码展示了如何在uni-app中实现一个简单的排行榜筛选功能。通过picker组件选择筛选条件，使用Vue的computed属性根据筛选条件动态生成筛选后的列表，并通过v-for指令渲染列表。这样，用户就可以方便地根据插件或项目demo来筛选排行榜内容了。