getBible/app
4
2
Fork 0
mirror of https://github.com/getbible/app.git synced 2024-12-22 07:48:55 +00:00
Code

And Pagination to verses & Debugging verse and chapter pagination

Browse Source
This commit is contained in:
Erastus Amunwe 2020-11-05 17:31:17 +02:00
parent 7da83bdeea
commit 5a05c0b8e0
1 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Verses.vue
View File

@ -1,8 +1,10 @@
<template> <template >
<div v-if="verses.length">
<ul :dir="dir" <ul :dir="dir"
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover"> class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
<li v-for="(verse, i) in verses" :key="i" <li v-for="(verse, i) in pverses" :key="i"
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"> :class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
>
<h5 class=" uk-primary"> <h5 class=" uk-primary">
<span class="uk-heading-bullet"> {{book_name}} </span> <span class="uk-heading-bullet"> {{book_name}} </span>
@ -14,6 +16,31 @@
<p></p> <p></p>
</li> </li>
</ul> </ul>
<div class="uk-position-small uk-position-center-left uk-overlay uk-overlay-default">
<span @click="prevV" class="uk-icon-button" uk-icon="icon:chevron-left; ratio:2"></span>
</div>
<div class="uk-position-small uk-position-center-right uk-overlay uk-overlay-default">
<span @click="nextV" class="uk-icon-button" uk-icon="icon:chevron-right; ratio:2"></span>
</div>
<!-- <ul class="uk-pagination" uk-margin>
<li><a href="#"><span uk-pagination-previous></span></a></li>
<li><a href="#">1</a></li>
<li class="uk-disabled"><span>...</span></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="uk-active"><span>7</span></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="uk-disabled"><span>...</span></li>
<li><a href="#">20</a></li>
<li><a href="#"><span uk-pagination-next></span></a></li>
</ul> -->
</div>
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
@ -21,12 +48,29 @@ export default {
data: () => { data: () => {
return { return {
// dir: '' // dir: ''
// book_name: '' prev: 0,
// chapter:'' next:5
} }
}, },
computed: { computed: {
...mapGetters(['verses', 'dir', 'book_name']) ...mapGetters(['verses', 'dir', 'book_name']),
pverses(){
return this.verses.slice(this.prev, this.next)
}
},
methods: {
nextV(){
if(this.next> this.verses.length) return;
this.next = this.next + 5
this.prev = this.prev+ 5
// console.log(this.next, this.prev);
},
prevV(){
if(this.prev<1)
return;
this.next -=5
this.prev -=5
}
} }
} }
</script> </script>