uni-app 双屏异显插件需求 可显示订单等信息

针对您提到的 uni-app 双屏异显插件需求，可以通过自定义组件和条件渲染来实现双屏显示不同内容的功能。以下是一个简单的示例代码，展示如何在 uni-app 中实现双屏异显功能，用于显示订单等信息。

首先，我们假设有两个屏幕，主屏幕和副屏幕。主屏幕显示订单列表，副屏幕显示选中订单的详细信息。

1. 创建主屏幕组件 MainScreen.vue

<template>
  <view>
    <list v-for="order in orders" :key="order.id">
      <navigator :url="'/pages/DetailScreen/DetailScreen?id=' + order.id">
        <view>
          {{ order.name }} - {{ order.status }}
        </view>
      </navigator>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, name: 'Order 1', status: 'Pending' },
        { id: 2, name: 'Order 2', status: 'Completed' },
        // 更多订单数据
      ]
    };
  }
};
</script>

2. 创建副屏幕组件 DetailScreen.vue

<template>
  <view>
    <text v-if="order">Order Details</text>
    <text v-if="order">Order ID: {{ order.id }}</text>
    <text v-if="order">Name: {{ order.name }}</text>
    <text v-if="order">Status: {{ order.status }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: null
    };
  },
  onLoad(options) {
    const orderId = options.id;
    // 模拟从服务器获取订单详情
    setTimeout(() => {
      this.order = {
        id: orderId,
        name: `Order ${orderId} Name`,
        status: `Order ${orderId} Status`
      };
    }, 1000);
  }
};
</script>

3. 修改 pages.json 配置路由

确保在 pages.json 中配置了 MainScreen 和 DetailScreen 的路由。

{
  "pages": [
    {
      "path": "pages/MainScreen/MainScreen",
      "style": {
        "navigationBarTitleText": "Main Screen"
      }
    },
    {
      "path": "pages/DetailScreen/DetailScreen",
      "style": {
        "navigationBarTitleText": "Detail Screen"
      }
    }
  ]
}

总结

上述代码展示了如何在 uni-app 中实现双屏异显的基本功能。主屏幕显示订单列表，点击订单项导航到副屏幕显示订单详情。您可以根据实际需求进一步扩展和优化，比如通过API请求获取真实数据、增加样式等。希望这个示例能帮助您快速上手双屏异显功能的开发。