nvue中list下使用progress组件渲染进度条

<template>
  <list>
    <cell v-for='(item, index) in list' :key='index'>
      <div class='item'>
        <text>{{ item }}</text>
        <progress v-bind:percent='percent'></progress>
      </div>
    </cell>
  </list>
</template>
<style>
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }
  progress {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: #eee;
  }
  progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 5px;
  }
  progress::-webkit-progress-value {
    background-color: #007aff;
    border-radius: 5px;
  }
</style>
<script>
  export default {
    data() {
      return {
        list: ['item 1', 'item 2', 'item 3'],
        percent: 50,
      }
    },
  }
</script>
<p>在 nvue 中使用 <code>progress</code> 组件来渲染进度条，需要确保以下几点：</p>
<ol>
<li>在 <code>template</code> 中使用 <code>progress</code> 组件，并设置 <code>v-bind:percent</code> 属性来控制进度条的进度。</li>
<li>在 <code>style</code> 中设置进度条的样式，例如设置进度条颜色、高度等。</li>
<li>如果在 <code>list</code> 组件中使用 <code>progress</code>，则需要为每个 <code>item</code> 设置一个唯一的 <code>key</code> 值。</li>
</ol>
<p><strong>示例代码：</strong></p>
<pre><code class="language-html">&lt;template&gt;
  &lt;list&gt;
    &lt;cell v-for='(item, index) in list' :key='index'&gt;
      &lt;div class='item'&gt;
        &lt;text&gt;{{ item }}&lt;/text&gt;
        &lt;progress v-bind:percent='percent'&gt;&lt;/progress&gt;
      &lt;/div&gt;
    &lt;/cell&gt;
  &lt;/list&gt;
&lt;/template&gt;

&lt;style&gt;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
  }
  progress {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: #eee;
  }
  progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 5px;
  }
  progress::-webkit-progress-value {
    background-color: #007aff;
    border-radius: 5px;
  }
&lt;/style&gt;

&lt;script&gt;
  export default {
    data() {
      return {
        list: ['item 1', 'item 2', 'item 3'],
        percent: 50,
      }
    },
  }
&lt;/script&gt;
</code></pre>
<p><strong>代码说明：</strong></p>
<ul>
<li>在 <code>template</code> 中使用 <code>list</code> 和 <code>cell</code> 组件来创建一个列表，并在每个 <code>item</code> 中添加一个 <code>progress</code> 组件来显示进度条。</li>
<li>在 <code>style</code> 中设置进度条的样式，包括高度、颜色和边框半径。</li>
<li>在每个 <code>cell</code> 中设置一个唯一的 <code>key</code> 值，这是为了确保在列表中正确渲染每个 <code>item</code>。</li>
<li>使用 <code>data</code> 属性来定义列表数据和进度条的进度。在这个示例中，我们将进度条的进度设置为 50，这将使进度条显示一半的进度。</li>
</ul>
<p><strong>注意：</strong></p>
<ul>
<li>使用 <code>v-bind:percent</code> 属性将 <code>percent</code> 数据绑定到 <code>progress</code> 组件的 <code>percent</code> 属性，以实现进度条的动态更新。</li>
<li>设置 <code>key</code> 值是 <code>list</code> 组件中渲染 <code>item</code> 的重要操作，它可以确保列表中的每个 <code>item</code> 都能够正确更新和渲染。</li>
</ul>