我对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>