菜鸟教程小白 发表于 2022-12-13 11:39:07

javascript - Nativescript 使用中继器多键值


                                            <p><p>我正在尝试使用中继器来显示 json 数据。但结果不是我想要的。我想要的是在值之后显示项目。不是在该项目全部显示后显示全部值。</p>

<p>这里是 page.bindingContext :</p>

<pre><code>page.bindingContext = {
&#34;myItems&#34;: [
    {
      &#34;value&#34;: &#34;100&#34;,
      &#34;item&#34;: &#34;Car&#34;
    },
    {
      &#34;value&#34;: &#34;200&#34;,
      &#34;item&#34;: &#34;Motor&#34;
    },
    {
      &#34;value&#34;: &#34;300&#34;,
      &#34;item&#34;: &#34;Boat&#34;
    }
]
};
</code></pre>

<p>这里是 xml 模板:</p>

<pre><code>&lt;ScrollView&gt;
&lt;StackLayout cssClass=&#34;bodyPilihProduk&#34;&gt;

&lt;Repeater items=&#34;{{ myItems }}&#34; style=&#34;font-size:12;&#34;&gt;
   &lt;Repeater.itemTemplate&gt;
      &lt;Label text=&#34;{{value}}&#34; margin=&#34;10&#34; /&gt;
   &lt;/Repeater.itemTemplate&gt;
&lt;/Repeater&gt;

&lt;Repeater items=&#34;{{ myItems }}&#34; style=&#34;font-size:20;&#34;&gt;
   &lt;Repeater.itemTemplate&gt;
      &lt;Label text=&#34;{{ item }}&#34; margin=&#34;10&#34; /&gt;
   &lt;/Repeater.itemTemplate&gt;
&lt;/Repeater&gt;

&lt;/StackLayout&gt;
&lt;/ScrollView&gt;
</code></pre>

<p>结果是:
<a href="/image/Scib2.png" rel="noreferrer noopener nofollow"><img src="/image/Scib2.png" alt="enter image description here"/></a> </p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>使用Repeater一次，打印两个项目怎么样？</p>

<p>已编辑:添加了orientation="horizo​​ntal"</p>

<pre><code>&lt;ScrollView&gt;
&lt;StackLayout cssClass=&#34;bodyPilihProduk&#34;&gt;

&lt;Repeater items=&#34;{{ myItems }}&#34; &gt;
   &lt;Repeater.itemTemplate orientation=&#34;horizontal&#34;&gt;
      &lt;Label text=&#34;{{ item }}&#34; margin=&#34;10&#34; style=&#34;font-size:20;&#34;/&gt;
      &lt;Label text=&#34;{{value}}&#34; margin=&#34;10&#34; style=&#34;font-size:12;&#34;/&gt;
   &lt;/Repeater.itemTemplate&gt;
&lt;/Repeater&gt;

&lt;/StackLayout&gt;
&lt;/ScrollView&gt;
</code></pre>

<p><br/><br/>
现在您可以同时显示项目和值。</p>

<p>iOS</p>

<p> <a href="/image/06aMg.png" rel="noreferrer noopener nofollow"><img src="/image/06aMg.png" alt="enter image description here"/></a> </p>

<p>安卓
<a href="/image/r1Lx2.png" rel="noreferrer noopener nofollow"><img src="/image/r1Lx2.png" alt="enter image description here"/></a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - Nativescript 使用中继器多键值，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/33512001/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/33512001/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - Nativescript 使用中继器多键值