uniapp 股票查询选择控件的实现方法

在uniapp中如何实现股票查询的选择控件？需要支持用户输入股票代码或名称进行模糊搜索，并显示匹配的股票列表供选择。最好能兼容H5和小程序端，有代码示例更佳。另外，这种控件的数据源该如何获取和更新？

2 回复

在uniapp中实现股票查询选择控件，可通过picker组件实现。步骤如下：

  1. 使用picker组件，mode=“selector”
  2. 设置range数组存放股票列表数据
  3. 绑定@change事件获取选中值
  4. 可配合搜索框实现股票筛选功能
  5. 样式自定义优化用户体验

示例代码：

data() {
  return {
    stockList: ['股票A','股票B','股票C'],
    selectedStock: ''
  }
}

在 UniApp 中实现股票查询选择控件，可以通过以下步骤完成：

1. 基本思路

  • 使用 <picker> 组件实现下拉选择。
  • 结合搜索框进行股票筛选。
  • 数据可本地存储或从接口获取。

2. 实现代码示例

<template>
  <view class="container">
    <!-- 搜索框 -->
    <input 
      v-model="searchText" 
      placeholder="输入股票名称或代码" 
      @input="filterStocks"
    />
    
    <!-- 选择器 -->
    <picker 
      @change="onStockChange" 
      :value="selectedIndex" 
      :range="filteredStocks" 
      range-key="name"
    >
      <view class="picker">
        当前选择：{{ selectedStock.name || '请选择股票' }}
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      selectedIndex: 0,
      selectedStock: {},
      stockList: [
        { code: '000001', name: '平安银行' },
        { code: '000002', name: '万科A' },
        { code: '600036', name: '招商银行' }
        //...更多股票数据
      ],
      filteredStocks: []
    }
  },
  
  mounted() {
    this.filteredStocks = [...this.stockList];
  },
  
  methods: {
    filterStocks() {
      if (!this.searchText) {
        this.filteredStocks = [...this.stockList];
        return;
      }
      
      this.filteredStocks = this.stockList.filter(item => 
        item.name.includes(this.searchText) || 
        item.code.includes(this.searchText)
      );
    },
    
    onStockChange(e) {
      this.selectedIndex = e.detail.value;
      this.selectedStock = this.filteredStocks[this.selectedIndex];
      console.log('选中股票:', this.selectedStock);
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

input {
  border: 1px solid #ddd;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border-radius: 8rpx;
}

.picker {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}
</style>

3. 功能说明

  • 搜索筛选：根据输入实时过滤股票列表
  • 选择反馈：显示当前选中股票信息
  • 数据展示：显示股票名称和代码

4. 扩展建议

  • 添加股票实时价格显示
  • 实现股票收藏功能
  • 集成股票数据API接口
  • 添加股票代码拼音搜索支持

5. 注意事项

  • 股票数据需要实时更新建议使用websocket
  • 大数据量时需做虚拟滚动优化
  • 可考虑使用第三方UI库如uView的选择器组件

这是一个基础的实现方案，可根据实际需求进行调整和优化。

回到顶部