动态生成多个uni-Card,并在每个actions下面生成多个card-actions-item

Question

1.动态生成多个uni-Card
2.在每个uni-Card下面，有多个actions，每个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>Stirrer</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>Pump</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>Value</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                </uni-card>    
</view>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

为了动态生成多个 uni-Card 以及在每个 uni-Card 下面生成多个 card-actions-item，你可以使用循环结构如 v-for（假设你正在使用 Vue.js）。假设你有一个包含卡信息的数组，你可以遍历这个数组并为每张卡动态生成内容。

以下是一个简化的示例，展示如何动态生成这些组件：

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

<script>
export default {
  data() {
    return {
      cards: [  // 这只是一个示例数据，你可以根据需要修改它
        {
          title: 'apple',
          extra: '14',
          avatar: 'path_to_avatar', // 或其他图片路径/URL
          actions: [
            { label: 'Stirrer', value: 'S', iconType: 'arrow-down' },
            { label: 'Start', value: 'Start', iconType: '' }, // 你需要为开始设置图标类型
            // ...其他动作项...
          ]
        },
        // ...其他卡片信息...
      ]
    };
  },
  methods: {
    onClick() { /* 处理点击事件 */ },
    actionsClick(value) { /* 处理动作点击事件 */ }
  }
};
</script>

在这个例子中，我们有一个 cards 数组，其中每个对象代表一张卡片的信息。我们遍历这个数组并为每张卡片动态生成 uni-card。在 uni-card 内部，我们又遍历每个卡片的 actions 数组来生成多个 card-actions-item。这样你就可以根据数据动态生成多个卡片和动作项了。