文章目录
-
- 概要
- 流程
- 小结
概要
实现类似以下图片的效果
整体架构流程
1.在HTML模板中创建一个容器，用于放置筛选组件
<view>
<view class="filter-container">
<view class="filter-item" v-for="(item, index) in filters" :key="index">
<text>{{ item.name }}</text>
<view class="filter-values">
<view class="filter-value"
v-for="(value, index) in item.values"
:key="index"
@click="handleFilterClick(item.id, value.id)">
{{ value.name }}
</view>
</view>
</view>
</view>
</view>
2.在vue数据对象中定义筛选条件
data() {
return {
filters: [
{
id: 1,
name: '选择类型',
values: [
{ id: 1, name: '全部' },
{ id: 2, name: '盒子' },
{ id: 3, name: 'x86' },
],
},
{
id: 2,
name: '选择状态',
values: [
{ id: 1, name: '全部' },
{ id: 2, name: '在线' },
{ id: 3, name: '离线' },
],
},
],
selectedFilters: {},
};
}
3.处理筛选点击事件的方法
methods: {
handleFilterClick(filterId, valueId) {
this.selectedFilters = {
...this.selectedFilters,
[filterId]: valueId,
};
this.fetchData();
},
},
4.实现获取数据的方法（异步请求）
methods: {
async fetchData() {
// 在此处发送异步请求，并根据选中的筛选条件过滤数据
// 例如，使用 `uni.request` 发送 HTTP 请求
const response = await uni.request({
url: '***/api/data',
data: this.selectedFilters,
});
this.items = response.data.items;
},
},
5.在created生命周期里初始化数据
created() {
this.fetchData();
},
小结
以上展示了uniapp项目中实现多个种类的筛选，可根据具体需求，对代码进行相关调整和优化
