uni-app 穿梭框组件

在 uni-app 中实现穿梭框（Transfer）组件，可以借助第三方组件库如 uView 或者手动实现一个简易版。以下是一个基于 uView 的穿梭框组件使用示例，以及一个简易版的实现思路。

使用 uView 的穿梭框组件

首先，确保你的 uni-app 项目已经集成了 uView。如果还没有集成，可以参考 uView 的官方文档进行集成。

1. 安装 uView

npm install uview-ui --save

2. 在 main.js 中引入 uView

import Vue from 'vue';
import uView from 'uview-ui';

Vue.use(uView);

3. 使用 u-transfer 组件

在你的页面组件中，你可以这样使用 uView 提供的穿梭框组件：

<template>
  <view>
    <u-transfer 
      :data="data" 
      :title="['Source', 'Target']" 
      @change="handleChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { key: 1, label: 'Item 1' },
        { key: 2, label: 'Item 2' },
        // 更多数据项...
      ]
    };
  },
  methods: {
    handleChange(result) {
      console.log('Transfer result:', result);
    }
  }
};
</script>

简易版穿梭框实现思路

如果你不想依赖第三方库，也可以自己实现一个简易版的穿梭框。以下是一个基本的实现思路：

1. 数据准备

data() {
  return {
    sourceData: [/* 数据源 */],
    targetData: [/* 目标数据 */],
    allData: [/* 所有数据 */]
  };
}

2. 模板结构

<template>
  <view>
    <!-- 左侧列表 -->
    <view v-for="item in sourceData" :key="item.key">
      <button @click="moveToTarget(item)">{{ item.label }}</button>
    </view>
    <!-- 右侧列表 -->
    <view v-for="item in targetData" :key="item.key">
      <button @click="moveToSource(item)">{{ item.label }}</button>
    </view>
  </view>
</template>

3. 方法实现

methods: {
  moveToTarget(item) {
    this.sourceData = this.sourceData.filter(d => d.key !== item.key);
    this.targetData.push(item);
  },
  moveToSource(item) {
    this.targetData = this.targetData.filter(d => d.key !== item.key);
    this.sourceData.push(item);
  }
}

上述代码仅展示了基本的穿梭框功能，实际项目中可能需要考虑更多细节，如数据去重、搜索过滤、样式美化等。