动态生成多个uni-Card、actions及card-actions-item。机器人不要乱来答题！

Question

1.动态生成多个uni-Card
2.在每个card下面生成多个actions
3.在每个actions下面生成多个card-actions-item
模板如下：

<view class="container">            
                <uni-card title="apple"  extra="14" :thumbnail="avatar" @click="onClick">
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>test</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>test2</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-up" size="18" color="#999"></uni-icons>
                            <text>test3</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                </uni-card>    
</view>

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

用户的需求是动态生成多个 uni-card，并且在每个 uni-card 下面动态生成多个 actions，最后在每个 actions 下面动态生成多个 card-actions-item。用户提供的模板是一个静态的示例，我们需要将其转换为动态生成的方式。

解决方案

为了实现动态生成，我们可以使用 Vue.js 的 v-for 指令来遍历数据，并根据数据动态生成 uni-card、actions 和 card-actions-item。以下是具体的解决方案：

1. 数据结构设计：

   • 我们需要一个数组来存储每个 uni-card 的数据。
   • 每个 uni-card 对象中应包含 title、extra、thumbnail 等信息。
   • 每个 uni-card 对象还应包含一个 actions 数组，用于存储该卡片下的 actions。
   • 每个 actions 对象中应包含一个 items 数组，用于存储该 actions 下的 card-actions-item。

2. 动态生成代码：

   • 使用 v-for 指令遍历 uni-card 数组，生成多个 uni-card。
   • 在每个 uni-card 中，再次使用 v-for 遍历 actions 数组，生成多个 actions。
   • 在每个 actions 中，再次使用 v-for 遍历 items 数组，生成多个 card-actions-item。

代码实现

<template>
  <view class="container">
    <!-- 动态生成多个 uni-card -->
    <uni-card
      v-for="(card, index) in cards"
      :key="index"
      :title="card.title"
      :extra="card.extra"
      :thumbnail="card.thumbnail"
      @click="onClick(card)"
    >
      <!-- 动态生成多个 actions -->
      <view
        v-for="(action, actionIndex) in card.actions"
        :key="actionIndex"
        slot="actions"
        class="card-actions"
      >
        <!-- 动态生成多个 card-actions-item -->
        <view
          v-for="(item, itemIndex) in action.items"
          :key="itemIndex"
          class="card-actions-item"
          @click="actionsClick(item.action)"
        >
          <uni-icons :type="item.icon" size="18" color="#999"></uni-icons>
          <text>{{ item.text }}</text>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 示例数据
      cards: [
        {
          title: "apple",
          extra: "14",
          thumbnail: "avatar.png",
          actions: [
            {
              items: [
                { icon: "arrow-down", text: "test", action: "S" },
                { text: "89(0R/M)", action: "Start" },
              ],
            },
            {
              items: [
                { icon: "arrow-down", text: "test2", action: "S" },
                { text: "89(0R/M)", action: "Start" },
              ],
            },
            {
              items: [
                { icon: "arrow-up", text: "test3", action: "S" },
                { text: "89(0R/M)", action: "Start" },
              ],
            },
          ],
        },
        // 可以添加更多卡片
      ],
    };
  },
  methods: {
    onClick(card) {
      console.log("Card clicked:", card);
    },
    actionsClick(action) {
      console.log("Action clicked:", action);
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.card-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.card-actions-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>

代码解释

1. 数据结构：

   • cards 数组存储了多个 uni-card 的数据，每个 uni-card 包含 title、extra、thumbnail 和 actions。
   • actions 数组存储了每个 uni-card 下的多个 actions，每个 actions 包含 items 数组。
   • items 数组存储了每个 actions 下的多个 card-actions-item，每个 item 包含 icon、text 和 action。

2. 动态生成：

   • 使用 v-for 指令遍历 cards 数组，生成多个 uni-card。
   • 在每个 uni-card 中，再次使用 v-for 遍历 actions 数组，生成多个 actions。
   • 在每个 actions 中，再次使用 v-for 遍历 items 数组，生成多个 card-actions-item。

3. 事件处理：

   • onClick 方法处理 uni-card 的点击事件。
   • actionsClick 方法处理 card-actions-item 的点击事件。

总结

通过上述代码，我们可以动态生成多个 uni-card，并在每个 uni-card 下动态生成多个 actions 和 card-actions-item。这种方法不仅灵活，而且易于维护和扩展。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑