Nativescript-vue RadListView loadOnDemand无法正常工作

时间:2019-11-30 21:29:20

标签: javascript android ios vue.js nativescript

我对Nativescript-vue还是很陌生,我添加了RadListView plugin,并且试图将loadOnDemand设置为Auto模式,即当我到达最低点时 会出现加载微调器,它只是卡在其中,我推入数组的项目不会出现。

我还有另一个问题,在项目点击中,我试图获取被点击项目的标题属性,但我得到“无法获取未定义的标题属性”。

<template>
<RadListView ref="listView" for="review in reviews" loadOnDemandMode="Auto" @loadMoreDataRequested="onLoadMoreDataRequested" loadOnDemandBufferSize="2" @itemTap="onItemTap(item)">
    <v-template>
      <GridLayout columns="auto,*" rows="auto,auto,auto" style="width:100%; height:auto; margin:0px 0px 10px 0px; padding:20px; background-color:white;" >
            <Image row="0" col="0" :src="review.image" loadMode="async" stretch="fill" style="width:55px; height:55px;  border-radius:50%; margin:0px 20px 0px 0px;"></Image>
            <StackLayout row="0" col="1" orientation="horizontal" style="width:100%; height:20px; ">
                <Label :text="'fa-star' | fonticon" class="fa" v-for="star in review.rating" fontSize="12" :key="star" style="color:rgb(244,227,73); margin:0px 1px 0px 0px; vertical-align:center;"></Label>
                <Label text="hace 3 horas" class="fa c_grey" style="margin:0px 0px 0px 10px; vertcal-align:center;"></Label>
            </StackLayout>
            <Label row="1" col="1" class="c_normal fs_smaller" textWrap="true" style="margin:0;" lineHeight="0" :text="review.body"></Label>
        </GridLayout>
    </v-template>
</RadListView>
</template>
<script >
export default {


name:'ReviewCardCard',


data(){
    return{
        reviews: 
        [
            { title:'Titulo 1', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 2', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
            { title:'Titulo 3', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:3 },
            { title:'Titulo 4', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 5', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
        ],
        pushableReviews:
        [
            { title:'Titulo 1', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 2', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
            { title:'Titulo 3', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:3 },
            { title:'Titulo 4', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:5 },
            { title:'Titulo 5', image:'~/assets/images/gloria-1.jpg', body:'I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position.', rating:4 },
        ],
    }
},


methods:
{
    onLoadMoreDataRequested()
    {
        console.log('load more');
        this.reviews.push(this.pushableReviews);
    },

    onItemTap(item)
    {
      console.log(item.title);
    },
}


}
</script>
<style scoped>
</style>

0 个答案:

没有答案