uniapp写一个下拉框筛选页面
时间: 2023-08-25 18:32:47 浏览: 64
好的,我可以为您提供一个简单的下拉框筛选页面的模板。
首先,在您的uniapp项目中创建一个新页面,我们称之为"filter.vue"。
然后,在"filter.vue"页面的template中添加以下代码:
```html
<template>
<view class="filter-container">
<view class="filter-item" v-for="(item, index) in filterItems" :key="index">
<text class="filter-label">{{ item.label }}</text>
<picker class="filter-picker" mode="selector" :range="item.options" @change="onPickerChange(index, $event)">
<view class="filter-picker-value">{{ item.options[selectedIndexes[index]] }}</view>
</picker>
</view>
</view>
</template>
```
在这个模板中,我们使用了uniapp内置的picker组件来实现下拉框功能。我们使用v-for指令来循环渲染筛选项,并在每个筛选项中使用picker组件。
接下来,在"filter.vue"页面的script中添加以下代码:
```javascript
<script>
export default {
data() {
return {
filterItems: [ // 筛选项
{ label: '品牌', options: ['全部', '华为', '小米', '苹果', '三星'] },
{ label: '颜色', options: ['全部', '黑色', '白色', '红色', '蓝色', '绿色'] },
{ label: '尺寸', options: ['全部', '4英寸以下', '4-5英寸', '5-6英寸', '6英寸以上'] },
],
selectedIndexes: [0, 0, 0], // 选中的选项索引
};
},
methods: {
onPickerChange(index, event) { // picker选项改变时触发
this.selectedIndexes.splice(index, 1, event.detail.value);
console.log(this.selectedIndexes); // 打印选中的选项索引
// 在这里可以根据选中的选项索引进行数据筛选操作
},
},
};
</script>
```
在这里,我们在data中定义了一个filterItems数组,用来存储所有的筛选项,以及一个selectedIndexes数组,用来存储每个筛选项选中的选项索引。
在onPickerChange方法中,我们根据picker选中的value来更新对应的selectedIndexes中的值,并打印出选中的选项索引。在这里,您可以根据选中的选项索引进行数据筛选操作。
最后,在"filter.vue"页面的style中添加以下代码:
```css
<style>
.filter-container {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20rpx;
height: 100vh;
}
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
}
.filter-label {
font-size: 30rpx;
color: #333;
}
.filter-picker {
width: 400rpx;
height: 60rpx;
border: none;
background-color: transparent;
}
.filter-picker-value {
font-size: 28rpx;
color: #666;
}
</style>
```
这段代码用来设置筛选页面的样式。
这样,一个简单的下拉框筛选页面就完成了。您可以根据自己的需求进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)