Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nativescript Vue RadListView
import Vue from 'nativescript-vue'
import VueRadListView from '~/views/VueRadListView'
Vue.config.silent = (TNS_ENV === 'production')
Vue.config.debug = (TNS_ENV !== 'production')
import RadListView from 'nativescript-ui-listview/vue';
Vue.use(RadListView);
new Vue({
render: h => h('Frame', [ h(VueRadListView) ])
}).$start()
<template>
<Page @loaded="get_partners" >
<GridLayout rows="*">
<RadListView row="0" ref="listView"
for="partner_item in all_partners.data"
layout="grid"
pullToRefresh="true"
:gridSpanCount= 3
height="800"
itemInsertAnimation="Slide"
itemHeight="150"
@pullToRefreshInitiated="onPullToRefreshInitiated"
@itemTap="goToSinglePartner(partner_item.company_id);"
>
<v-template>
<StackLayout height="150" class="partner_item " :backgroundColor="lightenDarkenColor(partner_item.primary_color, 8)">
<img height="100%" width="70%" verticalAlignment="middle" :src="partner_item.logo_url" stretch="aspectFit"/>
</StackLayout>
</v-template>
<v-template name="footer" v-if="all_partners.total > 9">
<GridLayout height="44" topMargin="20" bottomMargin="20">
<Stacklayout height="50" width="90%" class="m-t-40 m-b-20">
<button height="100%" text="Load more" @tap="onLoadMoreItemsRequested(all_partners.current_page)" class="btn btn-large bg--primary color--white " />
</Stacklayout>
</GridLayout>
</v-template>
</RadListView>
</GridLayout>
</Page>
</template>
<script>
export default {
data() {
return {
partners_loading: true,
load_more_active: false,
current_pagination_page: 1,
search_visible: false,
searchPhrase: '',
all_partners: {
total: 0,
current_page: 1,
data: []
},
current_filters: []
};
},
methods: {
get_partners(){
//Make your own function here
this.all_partners.data.push(
{
company_name: 'Bla bla',
company_id : 20,
primary_color : '#192304',
logo_url: 'http://'
},
{
company_name: 'Bla bla',
company_id : 20,
primary_color : '#192304',
logo_url: 'http://'
},
{
company_name: 'Bla bla',
company_id : 20,
primary_color : '#192304',
logo_url: 'http://'
}
);
},
lightenDarkenColor:function (hex, opacity) {
// This is used to make the background color lighter depending on company brand primary color
hex = hex.replace('#','');
let r = parseInt(hex.substring(0,2), 16);
let g = parseInt(hex.substring(2,4), 16);
let b = parseInt(hex.substring(4,6), 16);
let result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
},
onPullToRefreshInitiated () {
// in order to avoid race conditions (only on iOS),
// in which the UI may not be completely updated here
// use this.$nextTick call
this.$nextTick(() => {
setTimeout(() => {
this.all_partners.data.push(
{
company_name: 'Bla bla',
company_id : 20,
primary_color : '#192304',
logo_url: 'http://'
}
);
console.log('List updated')
this.$refs.listView.nativeView.notifyPullToRefreshFinished()
}, 300);
});
},
onLoadMoreItemsRequested(current_page){
//Get the current pagination page number and increase it by one when Load more button clicked
let next_page = parseInt(current_page) + 1
//I do assign it to a variable because I can use it later on Vuex Calls.
this.current_pagination_page = next_page
setTimeout(() => {
this.all_partners.data.push(
{
company_name: 'Bla bla',
company_id : 20,
primary_color : '#192304',
logo_url: 'http://'
}
);
this.$toast('List updated')
this.$refs.listView.nativeView.notifyLoadOnDemandFinished()
}, 300);
}
},
</script>
<style lang="scss" scoped>
.partner_item{
border-radius:4;
border-width:2;
border-color:#fff;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.