代码之家 › 专栏 › 技术社区 › McDonal_11

NativeScript:滚动时,ListView项正在重用

nativescript xml javascript

McDonal_11 · 技术社区 · 6 年前

我正在尝试通过单击将产品添加到购物车 商店[ <Label> ] 然后,我要为添加的列表更改标签的颜色。

之后,我试图通过滚动添加更多的产品。自动的,一些其他的 ListView 列表的标签颜色已更改。

我知道这些行为会发生在 UITableView 在里面 iOS . 在…的帮助下 NSDictionary 我可以处理这个。 Tableview Reusing in iOS

我不知道怎么处理这个 NativeScript

编码

exports.cartColorChange = function(args) {
    var lbl = args.object;
    lbl.color = "rgb(171, 0, 230)";
};

XML

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="addCart" text="&#xf291;" textWrap="true" tap="cartColorChange" />

  </StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>

CSS

Label.addCart{

    text-align: right;
    color: rgb(220, 220, 220);
    margin-right: 15px;
    margin-bottom: 0px;
    font-size: 15px;
    font-family: "FontAwesome";
}

输出:

2 回复 | 直到 6 年前

bhavin jalodara 6 年前

您正在直接更改渲染对象的颜色,因为当对象被回收时,它会保持该颜色。

您可以通过在单击时更改对象属性来实现相同的效果。并基于该属性应用样式。喜欢 className="{{isClicked?'clickedCart':'notClickedCart'}}" 或 stle.color="{{isClicked?'red':'blue'}}"

这里是更新的操场演示: https://play.nativescript.org/?template=play-js&id=T6sna8&v=8

编码

exports.cartColorChange = function(args) {
    var lbl = args.object;
    var item=lbl.bindingContext;
    var index = secondArray.indexOf(item)
    console.log("Clicked item with index " + index);
    item.isClicked = !item.isClicked;
    secondArray.setItem(index,item);
    // lbl.color = "rgb(171, 0, 230)";
};

XML

<ListView col="0" row="2" items="{{ mySecondItems }}" id="myListVw" itemLoading="listViewItemsLoading" itemTap="secondListViewItemTap" class="list-group" separatorColor="transparent">
<ListView.itemTemplate>

<GridLayout class="listGrid" columns="75,*" rows="*" width="100%" height="90" >
  <Label col="0" row="0" class="roundCircle" text="{{ price }}" textWrap="true"  />

  <StackLayout col="1" row="0" orientation="vertical" verticalAlignment="center">
       <Label class="booksubtitle" text="{{ subtitle }}" textWrap="true" id="wow"  />
       <Label class="bookTitle" text="{{ title }}" textWrap="true"  />
       <Label class="addCart" className="{{isClicked?'clickedCart':'notClickedCart'}}" text="&#xf291;" textWrap="true" tap="cartColorChange" />

  </StackLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>

CSS

Label.clickedCart{
    color:rgb(171, 0, 230);
}

Label.notClickedCart{
    color:gray;
}

Aaron Ullal 6 年前

是的,为了节省内存,确实重用了ListView项。

Here 您可以找到用于保存问题的方法,该方法包括将ListView项绑定到模型中的某个属性。