OStack程序员社区-中国程序员成长平台

标题: javascript - Nativescript 使用中继器多键值 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-13 11:39
标题: javascript - Nativescript 使用中继器多键值

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

这里是 page.bindingContext :

page.bindingContext = {
"myItems": [
    {
        "value": "100",
        "item": "Car"
    },
    {
        "value": "200",
        "item": "Motor"
    },
    {
        "value": "300",
        "item": "Boat"
    }
]
};

这里是 xml 模板:

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

  <Repeater items="{{ myItems }}" style="font-size:12;">
     <Repeater.itemTemplate>
        <Label text="{{value}}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  <Repeater items="{{ myItems }}" style="font-size:20;">
     <Repeater.itemTemplate>
        <Label text="{{ item }}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  </StackLayout>
</ScrollView>

结果是: enter image description here



Best Answer-推荐答案


使用Repeater一次,打印两个项目怎么样?

已编辑:添加了orientation="horizo​​ntal"

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

  <Repeater items="{{ myItems }}" >
     <Repeater.itemTemplate orientation="horizontal">
        <Label text="{{ item }}" margin="10" style="font-size:20;"/>
        <Label text="{{value}}" margin="10" style="font-size:12;"/>
     </Repeater.itemTemplate>
  </Repeater>

  </StackLayout>
</ScrollView>



现在您可以同时显示项目和值。

iOS

enter image description here

安卓 enter image description here

关于javascript - Nativescript 使用中继器多键值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33512001/






欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) Powered by Discuz! X3.4