遇到的uniapp的一个简单技术问题,求解

Question

uniapp中我想要将图中内容实现如下功能:选择部分内容后可以将选择内容通过确定按钮返回给上一页,要如何实现(比如选择卡一和选择卡二都勾选后在上一页的对应位置显示选择卡一和选择卡二这两个字) 其实就是如何将这个选择的内容显示在上一页的input框中(不知道如何代码实现)

Answer 1

方案来自 梦想橡皮擦 狂飙组基于 GPT 编写的 “程秘”

---

在uni-app中使用页面之间传递参数的方式来实现这个功能。

在选择页面中，记录选择的内容，可以使用一个数组来存储被勾选的卡片名称。

在确定按钮点击事件中，将选择的内容作为参数传递给上一页，可以使用uni.navigateBack()方法返回上一页，并传递参数。

在上一页的onLoad()生命周期函数中，获取传递的参数，并将选择的内容显示在对应的input框中。

以下是示例代码：

/ 选择页面
<template>

  <div>
    <label><input type="checkbox" v-model="selectedCards" value="卡一"> 卡一</label>
    <label><input type="checkbox" v-model="selectedCards" value="卡二"> 卡二</label>
    <button @click="confirmSelection">确定</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedCards: [], // 存储选择的卡片名称
    };
  },
  methods: {
    confirmSelection() {
      uni.navigateBack({ // 返回上一页并传递参数
        delta: 1, // 返回的页面数，这里是返回上一页
        success: () => {
          uni.$emit('selectedCards', this.selectedCards); // 发送事件传递参数
        },
      });
    },
  },
};
</script>
// 上一页
<template>

  <div>
    <input type="text" v-model="selectedCardsStr" readonly>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedCards: [], // 存储选择的卡片名称
      selectedCardsStr: '', // 选择的卡片名称字符串，用于在input框中显示
    };
  },
  onLoad(options) {
    uni.$on('selectedCards', (selectedCards) => { // 监听事件获取参数
      this.selectedCards = selectedCards;
      this.selectedCardsStr = selectedCards.join(', '); // 将选择的卡片名称字符串拼接起来
    });
  },
};
</script>

在上面的示例代码中，选择页面中记录选择的卡片名称的方式是使用一个数组来存储，确认按钮点击事件中使用uni.navigateBack()方法返回上一页，并通过uni.$emit()方法发送一个事件，将选择的卡片名称作为参数传递给上一页。在上一页中，通过uni.$on()方法监听事件，获取传递的参数，并将选择的卡片名称字符串拼接起来，显示在input框中。