动态生成多个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。当前代码是静态的，无法满足动态生成的需求。

解决方案

为了实现动态生成多个 uni-card 及其子组件，我们可以通过以下步骤来实现：

1. 数据结构设计：首先，我们需要设计一个数据结构来存储每个 uni-card 及其 actions 和 card-actions-item 的信息。
2. 动态渲染：使用 Vue.js 的 v-for 指令来动态渲染 uni-card、actions 和 card-actions-item。
3. 事件绑定：为每个 card-actions-item 绑定点击事件，确保点击时能够触发相应的逻辑。

代码实现

1. 数据结构设计

我们可以使用一个数组来存储每个 uni-card 的信息，每个 uni-card 对象中包含 title、extra、thumbnail 以及 actions 数组。每个 actions 对象中包含 card-actions-item 数组。

data() {
  return {
    cards: [
      {
        title: 'apple',
        extra: '14',
        thumbnail: 'avatar',
        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' }
            ]
          }
        ]
      },
      // 可以继续添加更多的卡片
    ]
  };
}

2. 动态渲染

使用 v-for 指令来动态渲染 uni-card、actions 和 card-actions-item。

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

3. 事件绑定

在 methods 中定义 onClick 和 actionsClick 方法来处理点击事件。

methods: {
  onClick() {
    // 处理卡片点击事件
    console.log('Card clicked');
  },
  actionsClick(action) {
    // 处理 actions 点击事件
    console.log('Action clicked:', action);
  }
}

完整代码

<template>
  <view class="container">
    <uni-card
      v-for="(card, index) in cards"
      :key="index"
      :title="card.title"
      :extra="card.extra"
      :thumbnail="card.thumbnail"
      @click="onClick"
    >
      <view
        v-for="(action, actionIndex) in card.actions"
        :key="actionIndex"
        slot="actions"
        class="card-actions"
      >
        <view
          v-for="(item, itemIndex) in action.items"
          :key="itemIndex"
          class="card-actions-item"
          @click="actionsClick(item.action)"
        >
          <uni-icons v-if="item.icon" :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',
          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() {
      // 处理卡片点击事件
      console.log('Card clicked');
    },
    actionsClick(action) {
      // 处理 actions 点击事件
      console.log('Action clicked:', action);
    }
  }
};
</script>

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

总结

通过上述步骤，我们实现了动态生成多个 uni-card 及其子组件的功能。通过合理的数据结构设计和 Vue.js 的 v-for 指令，我们可以轻松地扩展和维护代码。希望这个解决方案能够帮助到你！

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