Vue.js - 書牆
利用上一篇文章，單字卡，改一下，就可以變成我要的書籍清單，然後將 Title、Text拿掉，調整圖片大小為正方型後，就是書牆了
<html>
<head>
<title>書籍閱讀清單</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="cards.js"></script>
</head>
<body>
<div id="Cards1" class="mt-2 mb-2 ml-2 mr-2">
<div class="row ml-4 col-md-12">
<h2>書牆</h2>
</div>
<div class="row col-md-8" >
<div v-for="Card in Cards">
<div class="card bg-light" style="height:100px;width:100px;overflow:hidden">
<img class="card-img-top" :src="Card.Image" alt="Card image" onerror="this.onerror=null;this.src='images/default.jpg'">
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var app2 = new Vue({
el: '#Cards1',
data: {
Cards:[
],
ErrorMessage:'',
CurrentPage:1,
error:false,
prev:false,
next:true,
totalPage:1,
},
methods:{
Prev:function(event){
var day = currentPage-1;
if(PageItems[day]==undefined){
day = Cards.length-1;
ShowCards(day);
} else {
ShowCards(day);
}
},
Next:function(event){
var page = currentPage+1;
if(PageItems[page]==undefined){
page = 1;
ShowCards(page);
} else {
ShowCards(page);
}
},
SelectPage:function(){
ShowCards(app2.CurrentPage);
},
}
});
function ShowCards(page){
currentPage = page;
app2.Cards = PageItems[currentPage];
app2.CurrentPage = currentPage;
app2.prev = !(PageItems[page-1]==undefined || PageItems[page-1].length==0);
app2.next = !(PageItems[page+1]==undefined || PageItems[page+1].length==0);
localStorage.currentPage = page;
}
var PageItems = [];
var PageSize = 100;
var page = 0;
for(var i=0;i<Cards.length;i++) {
if(i%PageSize==0) {
page++;
}
if(PageItems[page]==undefined){
PageItems[page] = [];
}
PageItems[page].push(
{
No:(i+1).toString().padStart(3, "0"),
Image:'images/'+Cards[i][3],
Title:Cards[i][0],
Text:Cards[i][1]+'~'+Cards[i][2]
}
)
}
if(localStorage.currentPage==undefined) {
localStorage.currentPage = 1;
}
var page = localStorage.currentPage;
ShowCards(page);
app2.totalPage = PageItems.length - 1;
</script>
再把書改成正妹的話，就是正妹牆了。