UniApp仿支付宝账单筛选

在UniApp中，假设您需要实现类似支付宝账单筛选的功能，可以通过下面的示例代码来实现：

<template>
  <view class="container">
    <view class="filter-bar">
      <view class="filter" v-for="(item, index) in filters" :key="index">
        <text>{{ item.name }}</text>
        <view class="filter-options">
          <view
            class="option"
            v-for="(option, idx) in item.options"
            :key="idx"
            @click="selectOption(item.name, option)"
          >
            {{ option }}
          </view>
        </view>
      </view>
    </view>
    <!-- 筛选结果展示 -->
    <view class="result">
      <text>筛选结果：</text>
      <text v-for="(value, key) in selected" :key="key">{{ key }}: {{ value }} </text>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      filters: [
        {
          name: '类型',
          options: ['支出', '收入']
        },
        {
          name: '来源',
          options: ['转账', '转账', '支付']
        },
        // 可以根据需要添加更多筛选项
      ],
      selected: {}
    };
  },
  methods: {
    selectOption(filterName, option) {
      this.selected[filterName] = option;
    }
  }
};
</script>
 
<style>
.container {
  padding: 20px;
}
.filter-bar {
  margin-bottom: 10px;
}
.filter {
  margin-bottom: 10px;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
}
.option {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}
.result {
  margin-top: 10px;
}
</style>

这段代码提供了一个简单的账单筛选示例，包括两个筛选项：“类型”和“来源”。用户可以从每个筛选项的选项列表中选择一个选项，选择后会更新筛选结果。这个示例可以根据需要扩展，添加更多的筛选项和选项。