uni-app #插件讨论# uni-data-select 下拉框选择器 - DCloud前端团队 页面刷新后默认显示上一次筛选结果

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app #插件讨论# uni-data-select 下拉框选择器 - DCloud前端团队 页面刷新后默认显示上一次筛选结果

问题描述

比如筛选里有a,b,c三个项，我选项了a后，刷新页面后上一次的筛选居然没被清除，仍然显示选中了a。即使在onLoad里将cid重置也没有用

<uni-data-select class="data-select"  
    collection="opendb-mall-categories"  
    field="_id as value, name as text"  
    placeholder="分类筛选"  
    v-model="cid"  
    clear  
    @change="selectChange"  
>
</uni-data-select>

附件

视频.rar


Harmonyos Next教程
1 回复

在 uni-app 中使用 uni-data-select 插件时，如果你希望在页面刷新后默认显示上一次筛选结果，你可以利用 Vue 的响应式数据绑定和本地存储（如 localStorage）来实现这一功能。以下是一个示例代码，展示了如何实现这一需求。

1. 安装和引入 uni-data-select 插件

首先，确保你已经安装了 uni-data-select 插件，并在页面中正确引入。

<!-- 在页面的 script 部分引入插件 -->
import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue';

export default {
  components: {
    uniDataSelect
  },
  // ... 其他代码
};

2. 数据绑定和本地存储

在你的页面数据中，定义一个变量来存储上一次筛选的结果，并在页面加载时从 localStorage 中读取这个值。

<template>
  <view>
    <uni-data-select
      :options="options"
      v-model="selectedValue"
      placeholder="请选择"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        // ... 其他选项
      ],
      selectedValue: ''
    };
  },
  mounted() {
    // 从 localStorage 中读取上一次筛选结果
    const lastSelectedValue = localStorage.getItem('lastSelectedValue');
    if (lastSelectedValue) {
      this.selectedValue = lastSelectedValue;
    }

    // 监听 selectedValue 的变化，以便更新 localStorage
    this.$watch('selectedValue', (newVal) => {
      localStorage.setItem('lastSelectedValue', newVal);
    });
  }
};
</script>

3. 完整代码示例

结合上述内容，这里是一个完整的代码示例：

<template>
  <view>
    <uni-data-select
      :options="options"
      v-model="selectedValue"
      placeholder="请选择"
    />
  </view>
</template>

<script>
import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue';

export default {
  components: {
    uniDataSelect
  },
  data() {
    return {
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' }
      ],
      selectedValue: ''
    };
  },
  mounted() {
    const lastSelectedValue = localStorage.getItem('lastSelectedValue');
    if (lastSelectedValue) {
      this.selectedValue = lastSelectedValue;
    }
    this.$watch('selectedValue', (newVal) => {
      localStorage.setItem('lastSelectedValue', newVal);
    });
  }
};
</script>

通过这种方式，你可以在页面刷新后保持 uni-data-select 插件上一次筛选的结果。

回到顶部