Question

当用户点击垃圾桶图标（android）时会发生删除。当点击此图标时，会在项目上触发删除方法，更新模型，但是，我尝试在删除项目时添加淡出效果但似乎将效果应用两次。一旦进入已删除的项目，再次出现在杂货列表下方的项目上。我将根据本教程进行讨论：http://docs.nativescript.org/tutorial/chapter-0

list.xml ：

<Page loaded="loaded">
    <Page.actionBar>
        <ActionBar title="Groceries">
            <ActionBar.actionItems>
                <ActionItem text="Share" tap="share" ios.position="right" />
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>
    <GridLayout rows="auto, *" columns="2*, *">

        <TextField id="grocery" text="{{ grocery }}" hint="Enter a grocery item" row="0" col="0" />

        <Button text="Add" tap="add" row="0" col="1" />

        <ListView items="{{ groceryList }}" id="groceryList" row="1" colSpan="2">
           <ListView.itemTemplate>
                <GridLayout columns="*, auto">
                    <Label text="{{ name }}"/>
                    <Image src="res://ic_menu_delete" ios:visibility="collapsed" col="1" tap="delete" />
                </GridLayout>
            </ListView.itemTemplate>
        </ListView>
        <ActivityIndicator busy="{{ isLoading }}" rowSpan="2" colSpan="2" />
    </GridLayout>
</Page>

杂货一览viewmodel.js ：

var config = require("../../shared/config");
var fetchModule = require("fetch");
var ObservableArray = require("data/observable-array").ObservableArray;

function GroceryListViewModel(items) {
    var viewModel = new ObservableArray(items);

    viewModel.load = function() {
        return fetch(config.apiUrl + "Groceries", {
            headers: {
                "Authorization": "Bearer " + config.token
            }
        })
        .then(handleErrors)
        .then(function(response) {
            return response.json();
        }).then(function(data) {
            data.Result.forEach(function(grocery) {
                viewModel.push({
                    name: grocery.Name,
                    id: grocery.Id
                });
            });
        });
    };

    viewModel.empty = function() {
        while (viewModel.length) {
            viewModel.pop();
        }
    };

    viewModel.add = function(grocery) {
        return fetch(config.apiUrl + "Groceries", {
            method: "POST",
            body: JSON.stringify({
                Name: grocery
            }),
            headers: {
                "Authorization": "Bearer " + config.token,
                "Content-Type": "application/json"
            }
        })
        .then(handleErrors)
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            viewModel.push({ name: grocery, id: data.Result.Id });
        });
    };

    viewModel.delete = function(index,ourList) {
        return fetch(config.apiUrl + "Groceries/" + viewModel.getItem(index).id, {
            method: "DELETE",
            headers: {
                "Authorization": "Bearer " + config.token,
                "Content-Type": "application/json"
            }
        })
        .then(handleErrors)
        .then(function() {
            ourList.animate({
                opacity: 0.5,
                duration: 500
            }).then(function(){
                viewModel.splice(index, 1);
            });
        });
    };

    return viewModel;
}

function handleErrors(response) {
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

module.exports = GroceryListViewModel;

list.js :(文件摘要后面的代码）

exports.delete = function(args) {
    var item = args.view.bindingContext;
    var index = groceryList.indexOf(item);
    var ourList = args.object.parent;
    console.log('index',index);
    console.log(ourList);

    groceryList.delete(index,ourList);
};

Answer 1

无缘无故地手动完成这项工作还有很多工作，telerik ui有一个更加可配置的列表视图，可以通过一个简单的属性实现这一点......

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/item-animations

并且它是免费的！

如何在NativeScript中从列表中删除项目时进行动画处理

1 个答案: